Next.js 공식문서에 나와있는 기능들을 정리해 보자.
HTML:
<img src="/my-image.jpg...>
Next.js:
import Image from 'next/image'
<Image src="/my-img.jpg"...>
<Image>
및 즉각적인 빌드를 통한 자동 이미지 최적화.
로드 지연 : https://web.dev/lazy-loading
Next.js 를 사용하면 SEO에 강점을 갖도록 이미지가 자동으로 최적화 된다.
Image Optimization
내장 도메인 및 하위 도메인 라우팅 및 자동 언어 감지.
// next.config.js
module.exports = {
i18n: {
locales: ['en-US', 'fr', 'nl-NL'],
defaultLocale: 'en-US',
},
}
pages/blog.js가 있다면, 이 세팅을 통하여 다음과 같은 URL들이 자동 설정된다:
defaultLocale: 'en-US'
은 기본값이다.
Internationalization
실제 방문자 데이터와 페이지별 통찰력을 기반으로 한 진정한 등대 점수
Next.js Analytics
Measuring performance
자동 컴파일 및 번들링. 처음부터 생산에 최적화되어 있다.
자동설정
npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app
TypeScript를 사용하는건 끝에 --typescript 를 붙이면 된다.
개발 서버 실행
npm run dev
or
yarn dev
npm install 을 사용해서 수동 설정도 가능하다.
Zero Config
단일 프로젝트에서 빌드 시 (SSG) 또는 요청 시 (SSR) 페이지를 사전 렌더링합니다.
페이지를 한 번 만들고 CDN에서 제공할 수 있으므로 모든 요청에 대해 서버가 페이지를 렌더링하도록 하는 것보다 훨씬 빠르기 때문에 가능 하면 정적 생성(데이터 포함 및 제외)을 사용하는 것이 좋다 .
다음을 포함한 다양한 유형의 페이지에 대해 정적 생성 을 사용할 수 있다 .
SSG 는 사용자의 요청에 앞서 페이지를 미리 렌더링할 수 없다면 좋은 생각이 아니다.
해당 페이지에 자주 업데이트되는 데이터가 표시되는 경우 모든 요청에 따라 페이지콘텐츠가 변경될 수 있기 때문이다.
이 경우 서버 측 렌더링 을 사용할 수 있다. 속도는 느려지지만 미리 렌더링된 페이지는 항상 최신 상태로 유지된다. 또는 사전 렌더링을 건너뛰고 클라이언트 측 JavaScript를 사용하여 자주 업데이트되는 데이터를 채울 수 있다.
모든 요청에대해서 데이터를 항상 최신상태로 유지하고 싶다면 SSR
데이터의 변화가 많지 않고 사용자의 요청이 있기전에도 미리 렌더링을 할 수 있다면 SSG
을 사용하는 것이 좋다.
출처 : https://nextjs.org/learn/basics/data-fetching/two-forms
Hybrid: SSG and SSR
빌드 시간 후 정적으로 사전 렌더링된 페이지를 점진적으로 추가 및 업데이트합니다.
Incremental Static Regeneration
https://vercel.com/docs/concepts/next.js/incremental-static-regeneration
https://www.smashingmagazine.com/2021/04/incremental-static-regeneration-nextjs
자동 TypeScript 구성 및 컴파일.
npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app -- --ts
기존 프로젝트에서 시작하려면 루트 폴더에 빈 tsconfig.json 파일을 생성한다.
Facebook 규모에서 입증된 빠르고 안정적인 라이브 편집 경험.
pages
디렉터리 의 모든 구성 요소는 경로가 됩니다.
pages
디렉토리에 추가되면 자동으로 경로로 사용할 수 있다.'pages/index.js' → '/'
'pages/blog/index.js' → '/blog'
pages
디렉토리 내의 파일은 가장 일반적인 패턴을 정의하는 데 사용할 수 있다.'pages/blog/first-post.js' → '/blog/first-post'
'pages/dashboard/settings/username.js' → '/dashboard/settings/username'
'pages/blog/[slug].js' → '/blog/:slug' (/blog/hello-world)
'pages/[username]/settings.js' → '/:username/settings' (/foo/settings)
'pages/post/[...all].js' → '/post/*' (/post/2020/id/title)
선택적으로 API 엔드포인트를 생성하여 백엔드 기능을 제공합니다.
page
폴더 내의 모든 파일 pages/api
은 /api/*
에 매핑 된다. 서버 측 전용 번들이며 클라이언트 측 번들 크기를 늘리지 않는다.pages/api/user.js
는 상태 코드가 200인 json 응답을 반환한다.export default function handler(req, res) {
res.status(200).json({ name: 'John Doe' })
}
CSS 모듈을 사용하여 구성 요소 수준 스타일을 만든다. 내장 Sass 지원.
[import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
JavaScript를 넘어 개념을 확장하기 때문에 가능하다.pages/_app.js
을 만들어서 styles.css 파일을 import 한다.Google Chrome 팀에서 만든 최적화된 번들 분할 알고리즘입니다.
코드 분할이란?
출처 : https://crystallize.com/comics/no-code-splitting-vs-code-splitting
요청 시 또는 병렬로 로드할 수 있는 다양한 번들 또는 구성 요소로 코드를 분할하는 것이다.
애플리케이션이 복잡해지거나 유지 관리됨에 따라 CSS 및 JavaScript 파일 또는 번들은 바이트 크기가 커진다. 특히 포함된 타사 라이브러리의 수와 크기가 커짐에 따라 더욱 그렇게 되는데, 방대한 파일을 다운로드해야 하는 요구 사항을 방지하기 위해 스크립트를 여러 개의 작은 파일로 분할하여 페이지 로드 시 필요한 기능을 즉시 다운로드할 수 있으며 페이지 또는 애플리케이션이 대화형이 된 후 추가 스크립트가 지연 로드 되어 성능이 향상된다. 코드의 총량은 동일하지만(아마도 몇 바이트 더 클 수 있음) 초기 로드 중에 필요한 코드의 양은 줄일 수 있다.
번들링이란?
개발자는 애플리케이션을 더 큰 부분의 애플리케이션을 구축하는 데 사용할 수 있는 모듈, 구성 요소 및 기능으로 나눈다. 이러한 내부 모듈과 외부 타사 패키지를 내보내고 가져오면 파일 종속성의 복잡한 웹이 생성되는데, 번들링은 사용자가 웹 페이지를 방문할 때 파일에 대한 요청 수를 줄이는 것을 목표로 웹 종속성을 해결하고 파일(또는 모듈)을 브라우저에 최적화된 번들로 병합(또는 '패키징')하는 프로세스 다.
Bundling 된 파일을 분할해서 로드하여 초기 구동 속도를 빠르게 하고 사용자들에게도 눈에 띄는 성능 향상을 제공한다고 생각하면 된다.
Code-splitting and Bundling
https://nextjs.org/learn/foundations/how-nextjs-works/bundling
Next.js는 React를 기반으로 한 프레임워크로 React의 단점을 보완하기 위해 나온 프레임워크라는 생각이 든다. 그리고 Next.js를 사용하는 주된 이유는 SSR 구현과 SEO 최적화를 위해 사용하는 것 같다. React로도 SSR 구현이나 SEO 최적화가 가능하다지만 Next.js를 사용함으로 개발의 비용을 줄여주고 편리성을 늘려주었다.
Next.js를 공부하면서 SSR, SSG, CSR 에 대해서 좀 더 명확하게 이해할 수 있었다.
https://nextjs.org
https://velog.io/@syoung125/Next.js-%EA%B8%B0%EB%B3%B8-%EA%B0%9C%EB%85%90-1-Next.js-%EB%9E%80-Next.js%EB%A5%BC-%EC%99%9C-%EC%82%AC%EC%9A%A9%ED%95%A0%EA%B9%8C-Next.js%EC%9D%98-%EC%9E%A5%EC%A0%90%EC%9D%80
https://serzhul.io/REACT/nextjs-%EC%86%8C%EA%B0%9C
https://defineall.tistory.com/1037
https://medium.com/@msj9121/next-js-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%95%8C%EA%B3%A0-%EC%93%B0%EC%9E%90-8727f76614c9
https://ivorycode.tistory.com/19
https://hyemgu.tistory.com/237
https://www.hanl.tech/blog/next-js
https://thisiscoke.tistory.com/entry/Nextjs-%EA%B3%B5%EC%8B%9D%EB%AC%B8%EC%84%9C-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B01-%ED%95%98%EC%9D%B4%EB%B8%8C%EB%A6%AC%EB%93%9C-%EC%95%B1-SSR-SSG-CSR