원본: https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration Next.js에서는 빌드 이후에 정적 페이지를 생성하거나 업데이트하는 것이 가능하다. Incremental Static Regeneration(ISR)은 전체 사이트를 다시 빌드할 필요 없이 페이지 별로 static 생성이 가능하도록 해준다. ISR을 사용하면 수백만 페이지로 사이트를 확장하면서도 static의 이점을 유지할 수 있다. ISR을 사용하기 위해서는ㄴ getStaticProps에 revalidate를 추가해야 한다. 빌드할 때 사전 렌더링된 페이지에 대한 요청이 들어오면 처음에는 캐시된 페이지가 보여진다. 첫 요청과 10초 전 사이의 모든 요청들은 즉시 캐시된다. 10초 후의 요청은 여전히 캐시된 페이지를 보여준다. Next.js는 백그라운드에서 페이지를 재생성한다. 페이지가 성공적

원본: https://nextjs.org/docs/basic-features/data-fetching/get-static-props 만약 getStaticProps라는 함수를 export 한다면 Next.js는 getStaticProps에 의해 반환된 props를 사용하여 빌드 타임에 페이지를 사전 렌더링할 것이다. getStaticProps 사용해야 할 때 페이지를 렌더링하기 위해 필요한 데이터가 user requset 이전에 사용 가능할 때 데이터가 headless CMS에서 올 때 페이지가 SEO를 위해 반드시 사전 렌더링 되어야 하고 빨라야 할 때 데이터가 public하게 캐시 가능할 때 getStaticProps 실행 시점 getStaticProps는 항상 클라이언트가 아닌 서버에서 실행된다. 클라이언트 사이드에서는 getStaticProps 내부의 코드가 지워진다. getStaticProps는 항상 next build 중에

원본: https://nextjs.org/docs/basic-features/data-fetching/get-static-paths 어떤 페이지가 동적 루트를 가지고 있고 getStaticProps를 사용한다면 정적으로 생성될 경로들의 목록을 정의해야 한다. 동적 루트를 사용하는 페이지에서 getStaticPaths라는 함수를 export하면 Next.js는 이 함수에 의해 지정된 모든 경로를 정적으로 미리 렌더링 한다. 여기에서 getStaticPaths와 함께 사용할 수 있는 파라미터와 props를 확인할 수 있다. getStaticPaths를 사용해야 할 경우 동적 경로를 사용하고 다음과 같은 페이지들을 사전 렌더링 하는 경우에 getStaticPaths를 사용해야 한다. 데이터를 headless CMS에서 가져온다. 데이

원본: https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props 어떤 페이지에서 getServerSideProps라는 함수를 export한다면 Next.js는 해당 페이지를 요청할 때마다 getServerSideProps에서 리턴한 데이터를 사용하여 pre-rendering을 진행할 것이다. getServerSideProps 실행 시점 getServerSideProps는 server-side에서만 실행되고 절대 브라우저에서는 실행되지 않는다. getServerSideProps가 실행되는 경우는 다음과 같다. 페이지를 직접 요청하면 getServerSideProps가 실행되고 페이지는 여기서 반환된 props를 사용하여 pre-render된다. next/link나 next/router를 통해서 client-side에서 페이지 이동이 발생한다면 Next.j

원본: https://nextjs.org/docs/basic-features/pages Next.js에서 page란 .js, .jsx, .ts, .tsx 파일에서 export 된 리액트 컴포넌트이다. 각 페이지는 파일 이름으로 라우팅된다. 예) pages/about.js라는 파일이 있으면 이 파일은 /about이라는 주소로 접근 가능하다. 동적 라우팅 (dynamic routes) Next.js는 동적 라우팅을 제공한다. 예1) pages/posts/[id].js라는 파일이 있다면 이 파일은 posts/1, posts/2 등으로 매칭된다. 예2) pages/posts/[pid].js는 posts/1, posts/abc, 기타 등등으로 매칭된다. Pre-rendering 기본적으로 Next.js는 모든 페이지를 pre-rendering한다. pre-rendering은 즉 클라이언트에서 javascrip

이 시리즈의 글은 Next.js Documentation을 번역하는 글이다. 프론트엔드 개발자로서 Next.js에 대해서는 꼭 알아둬야 할 것 같아서 공부를 시작한다. 그럼 렛츠 고우! 원본: https://nextjs.org/docs/getting-started Getting Started Next.js System Requirements Node.js 12.22.0 버전 이상 MacOS, Windows(WSL), Linux Next.js 프로젝트 만들기(자동 설정) 1) 'create-next-app'을 사용하여 Next.js 앱을 자동으로 생성하고 설정해줄 수 있다. 2) typescript를 사용하고 싶다면 '--typescript'를 추가하면 된다. 3) 설치 후 실행하기 'npm run dev', 'yarn dev', 'pnpm dev'를 실행하면 'https://localhost:3000' 에서 개발 서버(dev)를 실행할 수 있다. 브