Basic Features > Pages 1 [공식 문서로 공부하는 Next.js]

기본적인 특징 1 (next.js 9.3 version) : Pages - 1

 

Next.js에서 page는 페이지 디렉토리의 .js, .jsx, .ts 또는 .tsx 파일에서 내보낸 React Component 입니다.
각 페이지는 파일 이름을 기반으로 경로와 연결됩니다.

 

예시) pages/about.js 가 React component 로 export 되었다며, /about로 접근이 가능합니다.

 

Pages with Dynamic Routes

Next.js는 동적 경로를 지원합니다. 'pages/posts/[id].js'라고 파일을 만들었다면 'pages/posts/1','pages/posts/2' 등으로 접근할 수 있습니다.

 

Pre-rendering

기본적으로 Next.js는 모든 페이지가 pre-render 합니다. 즉, Next.js는 client side의 JS 로 모든 작업을 먼저 수행하지 않고, 미리 각 페이지의 HTML 만을 생성합니다. 각 생성된 HTML은 해당 페이지에 필요한 최소한의 JS 코드와 연결되어집니다.
Pre-rendering 은 더나은 성능과 SEO 를 제공합니다.

 

Two forms of Pre-rendering

Next.js는 두가지의 pre-rendering 방법이 있습니다.

1. 정적 생성(추천) : HTML 은 빌드할 때 생성되며, 각 요청시에도 재사용됩니다.(캐시 가능)
2. Server-side 렌더링 : 각 요청에 대해서 HTML 이 생성됩니다.

 

Next.js에서는 어떤 렌더링 방식을 사용할 것인지 미리 선택을 할 수 있습니다.

정적 생성하여 렌더링 하는 것이 성능상으로는 좋습니다.

정적 생성 또는 Server-side 렌더링과 함께 Client-side 렌더링을 사용할 수도 있습니다.

 

 

Basic Features: Pages | Next.js