Next.js (pages router)

Chat gpt가 알려주는 이미지 최적화 | Next.js Image 태그를 쓴다고 이미지가 최적화되는 것은 아니다

이미지 최적화에 대해 고민하게 된 계기 유저의 프로필 이미지를 사용하는 부분에서 아래의 에러가 떴다. 그래서 Chat gpt와 티키타카를 하며 "왜 Next의 Image를 사용했는데도 이미지 최적화가 자동으로 되지 않았나" 알아보았다. "warn-once.js:16 Image with src "https://AWSURL....á„‘á ³á„ á ©á„€á ³á„ á ¢á„†á ¥á„‰á ³.png" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maint..

Next.js Sever Side Rendering을 위한 함수 | pages router

Next.js에서 서버 사이드 렌더링을 위한 함수를 공식문서에서 한번 흝어보았다. 또한, 각각 함수에 따른 내 블로그 프로젝트에 적용한 예시도 첨부하였다. 서버 사이드 렌더링이 궁금하다면? 아래 링크 참고 서버 사이드 렌더링이란? | with Next.js 전통적인 사이드 렌더링과 SPA 비교 위의 이미지를 보면, 최초 요청 이외에도 계속 서버에서 HTML을 받아올지 아닌지의 차이를 볼 수 있다. 쉽게 말하면 웹페이지 랜더링의 책임을 어디에 두느냐 mariais.tistory.com 1. getStaticPaths와 getStaticProps 블로그, 게시판과 같이 사용자와 관계없이 정적인 페이지에 유용하고 반드시 함께 사용해야 작동한다. 언제 사용해야 할까? SEO를 위해서 미리 렌더링이 되어야하고 빨..

Next.js Image 사진 비율 안깨지게 하는 법 | object-fit cover

새로운 프레임워크나 라이브러리를 쓸 때 가장 시간 아까운 것은 그 도구의 새로운 문법을 익히지 못해서 쉬운 부분에서 머뭇거리는 것 같다. 이번에 Next.js (pages router)를 하면서 이미지 최적화를 위하기도, next에서 권장해서, Image를 사용하고 있다. 보통은 이미지 비율을 그대로 가져기위해 background-size: cover;를 많이 사용할 것 이다. 즉, 본래 이미지의 가로 세로 비율을 그대로 가져가면서 배경을 다 덮는 css 방법이다. Next.js 공식문서를 해석해보자면, "fill" 은 이미지의 가로, 세로 길이를 모를 때 유용하다. 부모 요소는 반드시 position이 "relative", "fixed", "absolute" 중에 하나이어야 한다. 기본값으로는 "abs..

next.js grid, map 안의 background image 최적화 및 글자 위에 보이기 | pages router

[참고] Optimizing: Images | Next.js Optimize your images with the built-in `next/image` component. nextjs.org 1. next/Image 태그를 import 한다 2. fill 과 objectFit, sizes를 아래코드와 같이 설정한다. 3. Image태그의 부모요소에 position: "relative"를 설정한다. (크기가 지정되어있지 않을 경우 width, height도 설정) ++ background-image 위에 글자 보이게 하는법 4. Image태그의 부모요소 (여기서는 Item)의 background-color를 투명하게 만든다. 5. 글자를 div 태그로 감싸고 absolute를 준다. 6. 중앙정렬 한다...

Next.js pages router favicon 및 title 태그 넣는 폴더 위치 (전역설정)

프로젝트 시작을 app router가 안정적이지 않을 때 시작했다. 그래서 pages 폴더 구조를 가지고 있는데 파비콘 설정 및 타이틀 태그 설정법이 잘 안보여서 글을 올린다. 각 페이지별 설정도 있지만 간단한 프로젝트용으로 전역적인 파비콘설정이 필요한 경우 아래와 같이 적용하면 된다. - 꼭 next/head에서 불러온 Head를 사용해야한다. - icon(favicon) 경로는 public이 자동으로 기준이 되있기 때문에 그아래 경로부터 적으면 된다. 전체코드 import "@styles/globals.css"; import "@styles/quill.css"; import type { AppProps } from "next/app"; import { Noto_Sans, Source_Serif_4 }..

next.js | react.js 매거진 리스트 데이터 패칭 문제 해결

고민? 많은 쿼리를 같이 사용하는 한 api url 매거진 리스트를 받아오는 한 api에 총 4 query를 사용하려고 했다. 아래는 변경 전 코드이다. const getData = async () => { const magazineList = await SantiagoGet( `magazines?${continent ? `continent=${continent}&` : ""}${ currentRegionId ? `region_id=${currentRegionId}&` : regionIdFromMain ? `region_id=${regionIdFromMain}&` : "" }query_type=${query_type || "hot"}&base=0&limit=50${ searchTerm ? `&search..

Next, React api url 삼항연산자로 편리하게 사용하기

한 Api에 prameter가 필수가 아니면서 여러개 들어가는 경우가 있다. 예를 들면 search bar라던지… 이럴땐 데이터 패칭을 여러번 하지않고 해당 parmeter를 변수로 선언하고 그 변수에 값이 담겼을 경우, 클릭 또는 submit을 했을 때, 삼항연산자를 사용해서 원하는 데이터만 백엔드에서 가져올 수 있다. 이번 프로젝트에서는 백엔드 분의 취향이신지, 아님 블로그 형식의 사이트를 만드는 거라 그런지 이런식으로 여러 parameter를 활용하는 api 가 좀 있어서 아래 형태를 유용하게 쓰고 있다. easy peasy… /magazineList.js const [magazines, setMagazines] = useState([]); const getData = async () => { co..

getStaticProps 데이터 패칭 오류 (Next.js 13v, pages router)

getStaticProps 데이터 패칭 오류 어찌해결? (Next.js 13v, pages router 사용중) /main 페이지에서 getStaticProps 오류( 다른 페이지에서는 잘 불러와짐) 문제는 index.js/ Home function에 있었다. import Head from "next/head"; import MainPage from "./main"; export default function Home() { return ( ); } ./main 에서 MainPage 이름으로 작업중이였다. 오류해결! index.tsx에서 를 빼버렸다. Home자체에 페이지를 불러오지 않고 그냥 redirect 시켰다. 왜 이게 되는지는 나도 모른다… 이유아시는분… 아무튼 저렇게 하니 데이터가 잘 날라온다..

Next.js 공식문서 확인법 pages vs app router

새 프로젝트를 next로 하게 되었다.app router와 pages router를 고민이 되었다. 어떤 경력자 분이 pages가 상대적으로 오래되었기 때문에 참조 문서가 많다고, 오류가 생기거나 궁금한 걸 찾아볼수가 있다면서 추천하였다. 매우 솔깃했다. 오랜만에 코드를 짜는거라 예전 내 react 작업물들을 참고하면서 뼈대를 잡았다. 데이터 패치를 연습하려고 axios를 설치했다. 그런데 next 요놈이 좋은 걸 가지고 있다네? ServerSideRendering 이였다. 공식문서를 들어가보니 데이터패칭은 이렇게만 하면된단다. 개꿀처럼 보였다. 그래서 바로 백엔드 url넣어서 내 프로젝트에 적용해봤다. 근데 왠걸 죽어도 데이터가 안불러와졌다.. 도데체왜!!!! 몇시간을 구글링했다. 검색어는 “next ..