Next.js
리액트의 프레임워크인 Next.js 공부 시작!
Next.js가 제공하는 것
직관적인 페이지 기반 라우팅 시스템(동적 라우팅 지원)
정적 렌더링(SSG) 페이지와 서버사이드 렌더링(SSR) 페이지에 지원되는 프리렌더링
빠른 페이지 로딩을 위한 자동 코드 스플리팅
클라이언트 사이드 라우팅최적화
Built-in Css와 Sass 그리고 모든 CSS-in-JS 라이브러리 지원
Fast Refresh가 지원되는 개발 환경
API 엔드포인트와 서버리스 기능을 개발을 위한 API 라우팅
완전한 확장 가능성1. Pages in Next.js
페이지들은 각자의 파일명에 기반하여 라우팅된다
pages/index.js는 / 로 라우팅 됩니다.
pages/posts/first-post.js는 /posts/first-post로 라우팅 됩니다.
만약 다른 페이지로 넘어가고 싶을 때는?
2. Link Component
Next.js에서는 next/link로부터 Link 컴포넌트를 가져와 '< a >' 태그를 감싸야 합니다.
< Link >는 어플리케이션 내에서 다른 페이지로의 클라이언트 사이드 네비게이션이 가능하도록 해 줍니다.
Assets, Metadata, and CSS
1. Assets
Next.js는 최상위 레벨의 public 폴더 안에 있는 정적 파일을 사용합니다.
그리고 이미지 파일을 사용할 때는 React와 다르게 Image 컴포넌트를 사용한다
next/image는 HTML의 < img > 엘리먼트의 확장형이자 모던 웹을 위해 진화한 컴포넌트이다.
CSS 같은 경우 React와 동일하게 styled-component 나 emotion을 사용할 수 있고 module.css 로 css 파일을 만들어 사용할 수 있다.
그리고 styled-jsx 도 지원한다!
Pre-rendering and Data Fetching
1. Pre-rendering
기본적으로 Next.js는 모든 페이지를 프리렌더링합니다. 이 말인 즉슨, Next.js는 클라이언트 사이드의 자바스크립트로 페이지에 대한 전체 HTML을 생성하는 대신에 각 페이지에 대한 HTML을 사전에 생성합니다. 프리렌더링은 퍼포먼스와 SEO의 측면에 있어 더 나은 결과를 가집니다.
생성된 HTML은 해당 페이지에 필요한 최소한의 자바스크립트 코드로 되어있습니다. 페이지가 브라우저에 의해 로드될 때, 페이지의 자바스크립트 코드가 실행되고 페이지를 완벽히 인터렉티브하게 만듭니다. (이 과정을 hydration(수화)라고 합니다.
1차적으로 init html이 한번 돌고 리액트 컴포넌트가 완전히 로드되면 앱이 활성화되는 방식
기존 React 방식
로딩 중에 만나게 되는 화이트 화면
프리렌더링의 종류는 두 가지가 있는데
정적 생성(Static Generation)은 HTML을 빌드 타임에 생성하는 프리렌더링 방식입니다. 프리렌더링 된 HTML은 매 요청마다 재사용됩니다.
서버 사이드 렌더링(Server-Side Rendering)은 HTML이 요청시에 생성되는 프리렌더링 방식입니다.
그렇다면 어떤 방식이 더 좋을까?
공식문서에서는 가능한 정적 생성 방식 사용을 추천한다
유저가 요청하기 전에 미리 프리렌더링 되어야 하는 페이지들은 정적 생성 방식을 선택해야한다.
반면 유저의 요청보다 먼저 프리랜더링을 할 수 없는 경우는 정적 생성을 권유하지 않는다. 또는 꾸준히 업데이트가 되어 데이터를 보여줘야 하는 경우도 요청마다 바뀌는 것이 맞기 때문에 서버 사이드 렌더링을 사용하는 것이 맞다.
3. Static Generation With and without Data
정적 생성이어도 어떤 페이지는 외부의 데이트럴 필요로 하거나 외부의 API를 가져와야 하는 경우가 있다. 이럴 때도 정적 생성을 할 수 있는데 이때 사용하는 것이 getStaticProps 이다
getStaticProps는 배포 단계에서 빌드 타임 때 작동합니다
함수 내에서, 당신은 외부 데이터를 가져올 수 있고, props로 페이지에 보낼 수 있습니다.
export default function Home(props) { ... }
export async function getStaticProps() {
// Get external data from the file system, API, DB, etc.
const data = ...
// The value of the `props` key will be
// passed to the `Home` component
return {
props: ...
}
}getStaticProps를 사용한다는 것은 이 페이지는 이 데이터가 필요하니까 빌드할때 이 페이지 프리 렌더링할때 필요한 데이터니까 먼저 처리해야해 하고 알려주는 역할이다
Development vs Production
개발단계(npm run dev 혹은 yarn dev로 구동되는)에서, getStaticProps는 매 요청마다 작동합니다.
배포단계에서 getStaticProps는 빌드 타임에 작동합니다. 하지만, 이는 getStaicPaths로부터 리턴되는 fallback 키를 사용하여 향상되어질 수 있습니다.
!! getStaticProps는 page에서만 export 될 수 있습니다.
6. Fetching Data at Request Time
서버 사이드 렌더링을 사용하기 위해선, getStaticProps 대신에 getServerSideProps을 export 해야 합니다.
Cliend-side Rendering
Dynamic Routes
페이지 컨텐츠가 외부 데이터에 의존하는 경우
Catch-all Routes
Dynamic routes는 꺽쇠([])안에 ...를 추가함으로써 모든 경로를 처리하도록 확장될 수 있습니다. 예를 들면,
pages/posts/[...id].js는 /posts/a 경로, posts/a/b 경로, posts/a/b/c 경로와도 일치합니다.
이 방법을 위해선, getStaticPaths 안에서 id키의 값들을 반드시 배열 형태로 리턴시켜야 합니다.
return [
{
params: {
// Statically Generates /posts/a/b/c
id: ['a', 'b', 'c']
}
}
//...
]그리고 getStaticProps 안의 params.id도 배열이어야 합니다.
export async function getStaticProps({ params }) {
// params.id will be like ['a', 'b', 'c']
}
API Routes
Node.js에서의 서버리스 기능으로 API 엔드포인트를 손쉽게 생성하게 해 주는 기능이다
기본적인 생성방식은 pages/api 폴더 안에 다음과 같은 형식의 함수를 만들면 된다.
// req = HTTP incoming message, res = HTTP server response
export default function handler(req, res) {
// ...
}Do Not Fetch an API Route from getStaticProps or getStaticPaths
출처
https://intrepidgeeks.com/tutorial/nextjs-next-translate-and-learn-js-official-document-tutorial-1
https://intrepidgeeks.com/tutorial/nextjs-next-translate-and-learn-js-official-document-tutorial-2
https://intrepidgeeks.com/tutorial/nextjs-studying-while-translating-the-nextjs-official-documentation-tutorial-
