Next.js - 환경 설정 및 프로젝트 생성, Next.js 기본, Next.js 심화, Next.js 실제 사용예

• Vercel이 만든 React Framework for Production
• 라이브러리를 표방한 React의 장점은 살리되 다양한 편의 기능들을 추가한 Framework의 필요를 충족시킨것이 Next.js
• Next.js 하면 무조건 나오는 단어 SSR
• Server Side Rendering : 클라이언트로 전달될 HTML 파일 내용 (일부를) 미리 그려서 내려주는 것. 클라이언트 랜더링의 속도를 빠르게 하여 사용자 체감 속도 증진, 검색 엔진이 자바스크립트를 실행하지 않고 크롤링 가능 SEO

환경 설정 및 프로젝트 생성

launches data를 fetching해보자

https://docs.spacexdata.com/

CSR로한 SSR로 한번

https://nextjs.org/docs/api-reference/data-fetching/getInitialProps

Commerce

https://nextjs.org/commerce

Getting Started

https://nextjs.org/docs/getting-started
Pre-rendering

SSG

https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation

SSR

https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

다른예시코드들

https://github.com/vercel/next.js/tree/canary/examples

Next.js 기본

Next Learn

https://nextjs.org/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=nav-cta&utm_campaign=next-website

Setup

https://nextjs.org/learn/basics/create-nextjs-app/setup

Navigate

https://nextjs.org/learn/basics/navigate-between-pages
/pages/posts/first-post

Image optimization

https://nextjs.org/learn/basics/assets-metadata-css/assets
public에 담아두고, next/image의 Image를 사용하면 img 태그를 사용하는 것보다 최적화를 해준다. 빌드타임에는 영향없음

Metadata

https://nextjs.org/learn/basics/assets-metadata-css/metadata

CSS

https://nextjs.org/learn/basics/assets-metadata-css/css-styling

CSS Modules

https://nextjs.org/learn/basics/assets-metadata-css/layout-component

Global Styles

https://nextjs.org/learn/basics/assets-metadata-css/global-styles

Styling Tips

https://nextjs.org/learn/basics/assets-metadata-css/styling-tips

Pre-rendering

https://nextjs.org/learn/basics/data-fetching
hydration: 페이지가 브라우저에 로드되고 자바스크립트 코드가 실행되면서 페이지가 인터렉티브하게 동작할 상태가 되는 과정
Next.js는 기볹거으로 모든 페이지를 pre-rendering한다.
모든 페이지가 외부 Data fetching을 필요로 하는 것은 아니다.
데이터가 필요한 페이지에는 getStaticProps라는 async 함수를 구현하면 된다 그럼 빌드 타임에 해당 함수를 실행해서 데이터를 페칭해온다.
단, development 모드에서는 each request마다 getStaticProps가 실행된다
https://nextjs.org/learn/basics/data-fetching/with-data
title/ data는 YAML Front Matter

gray-matter라는 라이브러리로 해석 가능함

https://nextjs.org/learn/basics/data-fetching/implement-getstaticprops

외부 데이터 가져오기

https://nextjs.org/learn/basics/data-fetching/getstaticprops-details
fetch()함수는 next.js가 client-side/ sever-side 모두에 polyfills 해둠
외부 api 접근/ 직접 DB 접근도 가능함

사용자의 요청마다 외부 데이터 가져오기

https://nextjs.org/learn/basics/data-fetching/request-time
getServerSideProps 쓰면 TTFB는 getStaticProps보다 느리다.

Dynamic Routes

https://nextjs.org/learn/basics/dynamic-routes
getStaticPaths, remark, dynamic routes
/posts 하위에 md 파일이 있을때 해당 페이지를 statically generating 한다.
https://nextjs.org/learn/basics/dynamic-routes/page-path-external-data
md파일의 이름이 path가 되도록 한다

getStaticPaths

https://nextjs.org/learn/basics/dynamic-routes/implement-getstaticpaths
[{params:{id:string}}] 목록을 리턴한다. params 안에 dynamic routes key가 들어있어야함

getStaticProps

https://nextjs.org/learn/basics/dynamic-routes/implement-getstaticprops
id별로 md에서 데이터를 읽어서 page에 props를 전달하도록 함
Render Markdown
remark로 html에 md content 보여주기

Fallback for Dynamic routes

https://nextjs.org/learn/basics/dynamic-routes/dynamic-routes-details
getStaticPaths 옵션 fallback: true
const router = useRouter();
router.isFallback

API Routes

https://nextjs.org/learn/basics/api-routes/api-routes-details

Next.js 심화

리액트 프레임워크다. 다양한 도구들의 모임. API가 꽤나 많다.
다 알필요는 없지만 일반적인 기능은 모두 살펴보고 심화 기능들은 읽어라도 보자

공식문서로 보는 Pages

https://nextjs.org/docs/basic-features/pages

Data Fetching

https://nextjs.org/docs/basic-features/data-fetching

ISR

https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration

Built-in CSS Support

https://nextjs.org/docs/basic-features/built-in-css-support

Global Style / CSS modules / Sass / CSS in JS / styled-jsx

https://github.com/vercel/next.js/tree/canary/examples/with-emotion
Pages Pre-rendering/ Dynamic routes
getStaticProps revalidate(ISR) / redirect / notFound
getStaticPaths fallback: 'blocking'
getServerSideProps req.cookies

Layouts

https://nextjs.org/docs/basic-features/layouts
여러 레이아웃들을 사용할때는 Page.getLayout 활용 가능

Image Component and Optimization

https://nextjs.org/docs/basic-features/image-optimization

Font Optimization

https://nextjs.org/docs/basic-features/font-optimization
자동 적용/ 끌 수 있음

Script Optimization

https://nextjs.org/docs/basic-features/script

Static File Serving

https://nextjs.org/docs/basic-features/static-file-serving

Fast Refresh

https://nextjs.org/docs/basic-features/fast-refresh
React 구성요소일 경우 관련된 컴포넌트 혹은 파일만 업데이트
React 외부 요소면 전체 업데이트(full reload) 로컬 상태 유지가 default
// @refresh reset

ESLint

https://nextjs.org/docs/basic-features/eslint
JS code에서 문제가 될 부분을 찾고 고칠 수 있는 도구이다. 코드가 지키고 싶은 규칙을 구성할 수 있고 여러 규칙을 합쳐서 나만의 룰을 생성 가능하다

Routing

https://nextjs.org/docs/routing/introduction

Dynamic Routes

https://nextjs.org/docs/routing/dynamic-routes

Imperatively

https://nextjs.org/docs/routing/imperatively
next/link없이 라우터에 직접 페이지를 푸시하는 방법 router.push('/about')

Shallow Routing

https://nextjs.org/docs/routing/shallow-routing
데이터 페칭없이 프라우저에서 보이는 url만 변경
router.push('/>counter=10', undefined, {shallow:true})
다른 url에서 하면 page가 변경됨

API Routes

https://nextjs.org/docs/api-routes/introduction
pages/api/*는 페이지가 아닌 api처럼 동작
client side 코드에는 추가되지 않는다.

API Middlewares

https://nextjs.org/docs/api-routes/api-middlewares
api config 추가 혹은 다양한 미들웨어 추가 가능

Response Helpers

https://nextjs.org/docs/api-routes/response-helpers
response에 담을 수 있는 데이터
redirect 예시 /api/hello →/api/bye with 307

Next.js 실제

Production 실제로 서비스를 배포하기 전에 고려해야 할 부분들

https://nextjs.org/docs/going-to-production

Deployment(배포)

https://nextjs.org/docs/deployment
https://nextjs.org/learn/basics/deploying-nextjs-app

• Github 계정을 만든다
• 블로그 예제를 그대로 github에 올린다
• Vercel에 가입한다
• 프로젝트를 import 한다
• deploy한다
  PR에 올리면 Vercel이 알아서 Preview를 만들어준다. Merge하면 재배포도 알아서 해준다.

Authentication

https://nextjs.org/docs/authentication

인증패턴

• 클라이언트 사이드에서 인증: 로딩 상태가 ㅣㅆ음
• 서버 사이드에서 인증: 인증될때까지 block
• iron/ next-auth/ passport.js

Testing

https://nextjs.org/docs/testing

고급기능 Preview Mode

https://nextjs.org/docs/advanced-features/preview-mode
CMS(contens management system) 컨텐츠는 만들 때, SSG임에도 build time이 아닌 request time에 초안의 상태를 미리 볼 수 있는 기능

Dynamic Import

https://nextjs.org/docs/advanced-features/dynamic-import
js file을 다이나믹하게 임포트가능 react components도 가능
loading/ ssr/ suspense
Automatic Static Optimization 알아서 최적화 해준다

Static HTML Export

https://nextjs.org/docs/advanced-features/static-html-export
서포트 안하는 기능들 제거 혹은 대체 해야됨
image의 경우 custom or solution

Absolute Imports and Module path aliases

https://nextjs.org/docs/advanced-features/module-path-aliases
jsconfig.json 등을 활용해서 모듈 경로의 별칭 설정

AMP 지원

https://nextjs.org/docs/advanced-features/amp-support/introduction
AMP는 가속화된 모바일 페이지
https://amp.dev/
어떻게 빠른 렌더링을 확보하는가?
https://amp.dev/about/how-amp-works/
각종 규격을 둠(제약을 둠)
모든 스크립트는 비동기로 동작(block방지)/ 리소스의 사이즈의 지정/ 외부 리소스 렌더링 차단/ 메인 페이지에서 외부 자바스크립트 차단/ CSS는 inline으로만 사이즈 제약/ 스타일 재계산 최소화/ GPU활용하는 애니메이션만 사용 허용

AMP 적용

https://nextjs.org/docs/advanced-features/amp-support/adding-amp-components
구성요소
https://amp.dev/documentation/components/
페이지마다 설정 가능
https://nextjs.org/docs/api-reference/next/app

AMP 유효성 검사

https://nextjs.org/docs/advanced-features/amp-support/amp-validation 끌 수 있음
Babel https://nextjs.org/docs/advanced-features/customizing-babel-config

Babel 기본 자바스크립트 컴파일러

https://babeljs.io/docs/en/usage
존재하는 플러그인 써보기
npm install --save dev @babel/plugin-transform-arrow-functions
./node_modules/.bin/babel babel-test.js --plugins @babel/plugin-transform-arrow-function,./babel-plugin-var.js
매번 반복해서 플러그인 넣기 힘드니깐 .babelrc 파일 생성
플러그인 모음인 프리셋 써보기
npm install --save dev @babel/preset-env
./node_modules/.bin/babel babel-test.js --presets=@babel/env
.babelrc 파일 생성
AST(Abstract Syntax Tree) 소스 코드의 추상 구문 구조 트리
코드를 노드로 표현한 것

PostCSS

https://nextjs.org/docs/advanced-features/customizing-postcss-config