Next.js Docs
Dynamic Routes
Next.js에서 파일 이름이 대괄호로 감싸여진 페이지는 dynamic routes 페이지이다 예) [id].js
How to Statically Generate Pages with Dynamic Routes
동적인 <id> 값의 /posts/<id> 경로 정적 페이지를 만들고 싶다면,
/pages/posts/[id].js 페이지 생성,
reder 될 react component 구현,
getStaticPaths, getStaticProps 구현,
getStaticPaths
path로 들어 올 수 있는 값들을 리스트로 리턴한다
development에서는 모든 요청 마다 실행,
production에서는 빌드 타임에만 실행
fallback 값이 false 라면 getStaticPath 리턴 리스트에 없는 path는 404 페이지를 보여준다.
fallback true와 fallback blocking도 있는데
따로 공부 필요
getStaticProps
id값을 이용해 post 데이터를 fetching 한다
Catch-all Routes
pages/posts/[...id].js 는 /posts/a, /posts/a/b, /posts/a/b/c 등 매치됨
Router
만약 Next.js router를 접근하고 싶다면, useRouter hook을 next/router를 import 하여 접근
Custom 404 Pages
pages/404.js 이 파일은 빌드 타임에 정적으로 생성
// pages/404.js
export default function Custom404() {
return <h1>404 - Page Not Found</h1>
}markdown rendering library
remark, remark-html
Formatting the Date library
date-fns
유용한 링크
프론트엔드 체크리스트
https://github.com/thedaviddias/Front-End-Checklist
자바스크립트는 왜 프로토타입을 선택했을까
https://medium.com/@limsungmook/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%EC%99%9C-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85%EC%9D%84-%EC%84%A0%ED%83%9D%ED%96%88%EC%9D%84%EA%B9%8C-997f985adb42
다음 공부
Next.js Dynamic routing - getStaticPath fallback
