시작하기
Next.js는 다양한 기능을 추상화해서 제공한다.
파일 생성해보기
pages/index.js is associated with the / route.
pages/posts/first-post.js is associated with the /posts/first-post route.파일 구조 그대로 url에 반영된다.
Link
<h1 className="title">
Learn <a href="https://nextjs.org">Next.js!</a>
</h1>페이지 이동할 때 a 태그 사용한 것
<h1 className="title">
Read{' '}
<Link href="/posts/first-post">
<a>this page!</a>
</Link>
</h1>페이지 이동할 때 next의 link 사용한 것
-> 페이지를 렌더링할 때 필요한 부분만 요청해서 가져온다.
Code Splitting and prefetching
-
Code Splitting
코드들이 적절이 분리(code splitting) 되어 있고, 새로운 페이지에 접속할 때 필요한만큼만 로드한다. -
prefetching
Link 태그 사용시 연결된 페이지 리소스를 미리 받아온다. (production 모드에서 확인 가능)
CSS
styled-jsx / css / scss
모두 사용 가능하다.
(tailwindcss 도 사용 가능)
CSS Modules
xxxx.module.css 이란 이름으로 정해줘야 한다.
className의 유일성을 확보해줌.
Global
pages/_app.js 파일
import '../styles/global.css';
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}_app.js 내부의 코드는 모든 페이지에 공통적으로 적용된다.
공통으로 적용하고 싶으면, 공통 영역에 사용해야한다.
Pre-rendering
* hydration : 페이지가 브라우저에 로드되고 자바스크립트 코드가 실행되면서 페이지가 인터렉티브하게 동작할 상태가 되는 과정
Next.js는 기본적으로 모든 페이지를 Pre-rendering 한다.
SSG VS SSR
Server Static Generation VS Server Side Rendering
(build time VS each request)
하지만 npm run dev로 실행할 경우에는 each request 마다 빌드한다.
모든 페이지가 외부 Data Fetching을 필요로 하는 것이 아니기 때문에 Pre-rendering이 필요 없는 페이지에는 build time에 statically generated 된다.
-> Data Fetching이 필요한 경우 getStaticProps 같은 함수를 사용하면 된다.
-
빌드 할 때 한번만 가져와도 되는 데이터 ->
getStaticProps -
사용자의 요청마다 데이터 가져오기 ->
getServerSideProps
TTFB(time to frist byte)는 전자보다는 느리다. -
Cliend-Side Rendering를 고려할 경우(Private, user-specific pages where SEO is not relevant) -> SWR(캐싱/패칭) 추천
Dynamic Routes
페이지 동적으로 추가하기
-
[id].js
id 기반의 동적 페이지.
pages/posts/설정한 id값 -
[...slug].js
경로까지 동적으로 만들 수 있다.
/posts/1234/5678
getStaticPaths
Static Site에 동적 페이지를 추가 하기 위해서는 Path를 명시해주어야 한다.
[ { params: { id: string } } ] 목록을 리턴해야한다. params 안에는 dynamic routes key(id)가 들어가있어야 한다.
// [id].js
export async function getStaticPaths() {
const paths = getAllPostIds();
return {
paths,
fallback: false,
};
}getAllPostIds는 posts.js 파일에 작성해준 함수이다.
export function getAllPostIds() {
const fileNames = fs.readdirSync(postsDirectory);
// Returns an array that looks like this:
// [
// {
// params: {
// id: 'ssg-ssr'
// }
// },
// {
// params: {
// id: 'pre-rendering'
// }
// }
// ]
return fileNames.map((fileName) => {
return {
params: {
id: fileName.replace(/\.md$/, ''),
},
};
});
}.md로 끝나는 파일을 객체를 담은 배열로 리턴한다.
fallback
paths 페이지가 없을 경우 처리방법을 의미한다.
Static Site 에서는 페이지 처리를 호스팅 서버에서 하기 때문에, Dev Mode 에서만 의미가 있다.
fallback을 false로 둘 경우, 리턴하지 않은 페이지(params에 없는 페이지)을 접근하려고 하면 404 page를 보여준다.
true로 둘 경우, router.isFallback, router를 이용해 이 경우에 대한 처리를 해준다.
const Post = ({ post }) => {
cont router = useRouter();
if (router.isFallback) {
return <div>Loading...</div>
}리턴하지 않은 페이지에 접속 시, 해당 화면(Loading...)을 사용자에게 보여준다.
이후, 요청된 경로를 정적으로 생성한다. 동일한 경로에 대한 후속 요청은 빌드 시 미리 렌더링된 다른 페이지와 마찬가지로 생성된 페이지를 제공한다. 향후 요청을 위해 캐시되므로 경로당 한 번만 발생하고, 다음에 여기로 요청 받으면 static한 페이지를 보여준다.
Catch-all Routes
posts 내부의 모든 파일, 폴더에 접근하기 위해서는
/pages/posts/[...id].js로 세팅하면
/pages/posts/a pages/posts/a/b pages/posts/a/b/c 에 모두 접근할 수 있다.
getStaticProps에서 [ { params: { id: ['a', 'b', 'c'] } } ] 로 전달하면 된다.
error page custom
404 페이지 등 에러 페이지도 404.js 라는 파일에서 커스텀해서 사용할 수 있다.
API Routes
API 요청은 다른 서버가 있어야 사용할 수 있는데, Next.js에서 제공하는 API Routes 시스템이 있다.
API 경로의 좋은 사용 사례
handling form input
예를 들어 페이지에 form을 생성하고 API Route로 POST 요청을 보낸다. 그리고 DB에 direct로 저장할 수 있는 코드를 작성한다.
API Route 코드는 client budle의 부분이 아니어서 server-side 코드를 안전하게 작성할 수 있다.
참고 블로그
