Next.js
1.<Next.js> getServerSideProps과 getStaticProps란?
회사 기술 면접중에, 최종 프로젝트에 사용했었던 Next.js의 getServerSideProps, getStaticProps의 대한 질문이 나왔었다.Next.js를 간단하게 5일 정도 학습하고 바로 프로젝트에 들어갔던 터라, 면접을 봤을 당시에는 프로젝트가 끝나고 3
2.<Next.js> Data Fetching
기존 React 데이터 페칭의 문제점 처음에 텅 빈 HTML을 반환 서버에서 데이터를 받아오느라 지연시간이 있음. Next.js가 페이지를 준비하고 사전 렌더링하는 방식 Next.js는 사전 렌더링이라는 개념을 이용하여 기존 React 데이터 페칭의 문제점을 해결합
3.<Next.js> 내부에선 어떤 일이 일어나고 있는가?
next build 스크립트는 다음 Next.js 프로젝트를 배포할 때 실행하는 스크립트다.가장 마지막에 실행될 이 next build 명령어가 페이지를 사전 생성합니다.npm run build 명령어를 실행하고, 아래 사진처럼 ⏺으로 되어있는 것은 SSG(정적 측면
4.<Next.js>getStaticProps 옵션과 getStaticPaths()
revalidate : 60초마다 서버에서 데이터를 새로 받아옵니다.notFound : true로 설정하면 페이지가 404 오류를 반환합니다. 그에 따라 404 오류페이지로 이동합니다. (데이터 페칭에 실패할 경우 필요)redirect : 사용자를 다른 페이지로 보낼
5.<Error> "Detected next.config.js, no exported configuration found" 부제 : next.js 12 프로젝트 생성 방법
23.12.16 기준으로 next.js는 현재 14버전까지 나와있는 상태입니다.회사에선 next.js 12버전을 사용중이라, 연습 프로젝트을 만드는 중에 해당 에러를 마주했습니다.npx create-next-app@12이렇게 하면 간단하게 될 줄 알았습니다.왜냐하면 프
6.Next.js 14 페러렐 라우트과 인터셉팅 라우트
localhost3000/home/compose... 경로로 들어갔을 때,인터셉팅 라우트 처리를 하지 않으면 compose 폴더에 있는 page.tsx View가 보인다.하지만 지금같은 경우에는 @modal 폴더에 (.)로 인터셉팅 라우트 처리를 해줬는데, 여기서 궁금
7.<Next.js> app router 중첩 경로
http://localhost:3000/elonmusk/status/1/photo/1해당 경로의 폴더 구조를 만드는 도중에 당황했던 내용.photo 폴더에 \[photoId]가 아닌 \[id]로 작성하면,next.js가 경로 인식을 하지 못함.상위 경로에 \[
8.Next.js url 요청 경로 마스킹 처리
https://nextjs.org/docs/app/api-reference/next-config-js/rewrites
9.<Next.js>build시 나타나는 module not found Error... 해결
Next.js프로젝트를 EC2 build할 때, 아래와 같은 에러가 발생했다.module not found Error...로컬환경에서는 npm run build 문제없이 잘 되는데?알고보니 내 github에 올라가있는 파일 디렉토리와 내 로컬 파일 디렉토리가 동일하지
10.<Next.js> 14 - app router 구조
next.js app router 프로젝트 폴더 구조
11.<Next.js> App Router 페이지 경로 추가
/about이라는 페이지를 추가한다는 가정app 폴더에서 about 폴더를 만들어준다.Next.js가 자동으로 page.tsx의 내용을 layout.tsx에서 지정한 {children}에 삽입해준다.page.js는 화면에 렌더링 되어야 하는 파일 (반드시 해당 파일명이
12.<Next.js> app router [metadata]
Next.js 14 app router - metadata
13.<Next.js> Server Component vs Client Components
Next.js 14부터는 리액트 컴포넌트들이 next.js 서버에서 미리 랜더링되게 된다.이를 리액트 서버 컴포넌트라고 부른다. (React Server Components, RSC)Next.js 14에서 RSC를 사용하면 성능 최적화에 큰 도움이 된다. 서버 컴포넌트