끄적이는 개발노트

이번 포스트에서는 getStaticPaths에 대해 알아본다. getStaticPaths는 페이지가 getStaticProps를 사용하고 동적 경로(Dynamic Routing)를 사용한다면 빌드 시에 path들이 필요하다. 동적 라우팅을 구현하기 위해 필요한 것이 getStaticPaths 라는 비동기함수로, 사전 렌더링될 때, getStaticPaths에서 반환하는 객체의 paths 안에 있는 경로를 가지고 렌더링에 사용한다. 1. 개념 위에서 언급했듯이, 페이지가 동적 경로를 사용하여(Dynamic Routing) 정적으로 사전 렌더링(getStaticProps)을 하고 있다면 반드시 getStaticPaths를 사용해야 한다. getStaticPaths는 getServerSideProps와 함께 ..

이전 포스트 getStaticProps에 이어서 파일 시스템에서 직접 읽는 방법인 process.cwd()를 알아본다. 그러기 위해서는 파일의 전체 경로를 가져와야 한다. Next.js는 코드를 별도의 디렉토리로 컴파일하므로 '__dirname'은 실제 페이지 디렉토리 경로와 다른 값을 반환하기 때문에 사용할 수 없다. 이 때, 사용하는 것이 process.cwd() 이다. 1. index.js 수정 // index.js import { promises as fs } from "fs"; import path from "path"; function Blog({ posts }) { console.log(posts); return ( {posts.map((post) => ( {post.filename} {po..

이전 포스트를 통해 Next.js 에는 두 가지의 사전 렌더링 형태 (Static Generation, Server-side Rendering) 이 있다는 것을 알았다. 각 경우에서 페이지는 데이터를 가져와야 되는데 이를 Data Fetching 이라고 한다. 사전 렌더링을 위해 데이터를 가져오는 방법으로 Next.js 는 세 가지 고유한 함수를 제공한다. getStaticProps(정적 생성) : 빌드 시 데이터를 가져옴 getStaticPaths(정적 생성) : 데이터를 기반으로 페이지를 미리 렌더링하는 동적 경로를 지정 getServerSideProps(서버 사이드 렌더링) : 각 요청에서 데이터를 가져옴 0. 공통 사항 context 코드를 살펴보면 접하게 되는 사항으로, context 매개 변수..

이번 포스트에서는 Next.js의 가장 중요한 개념 중 하나인 사전 렌더링에 대해 알아본다. 1. 개념 기본적으로 Next.js는 모든 페이지를 미리 렌더링한다. 즉, Next.js는 클라이언트 측 Javascript로 모든 작업을 수행하는 대신 페이지에 대해 미리 HTML을 생성한다. 생성된 HTML은 해당 페이지에 필요한 최소한의 Javascript 코드와 연결되고, 브라우저에서 페이지를 로드하면 해당 Javascript 코드가 실행되어 페이지를 완전히 실행한다. 이를 Hydration 이라고 말한다. Pre-rendering 사전 렌더링은 처음 Initial Load에 사전 렌더링된 HTML이 보여진다. 이 후, Hydration에서 컴포넌트가 초기화되고 상호작용이 필요한 컴포넌트가 Javascri..

이번 포스트에서는 페이지와 라우팅에 대해 알아본다. 아래에 사용될 코드들은 예제의 부분을 따로 떼어내서 개념 설명에만 사용할 예정으로, 직접적인 예제 실습을 원하면 공식 문서의 예제를 따라하는 것을 권장한다. https://nextjs.org/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=next-website Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static w..

이번 포스트에서부터는 공식 문서를 따라하며, 기본 사용법을 알아본다. https://nextjs.org/docs/getting-started Getting Started | Next.js Get started with Next.js in the official documentation, and learn more about all our features! nextjs.org 1. 설치 우선, Node.js의 버전이 12.0 이상이어야 한다. $> npx create-next-app --typescript 뒤에 붙은 --typescript는 타입스크립트의 사용여부에 따라 추가하면되는 옵션이다. 위 명령어를 실행하면 프로젝트 명을 묻는데 이 때 설정해도 되고 명령어 뒤에 추가를 해도 된다. 2. packag..