학습내용
- Next.js 란?
- Page와 Routes
- API Routes
Next.js란?
리액트 프레임워크
yarn create-next-app
특징
- SSR을 지원하기 때문에 리액트의 단점(CSR)이었던 SEO를 보완
- 초기 로딩 속도 개선을 위해 자동 코드 분할(Code Splitting) 지원
- 기존의 리액트보다 개발 환경 설정이 간단
- react-router-dom 대신 파일 기반 라우팅 시스템 사용
- CSR과 SEO를 모두 충족
Code Splitting (Lazy-Loading)
하나로 번들된 코드를 여러 컴포넌트 혹은 코드로 분리 후 당장 필요한 자바스크립트 파일만을 로딩하는 방식
개발 모드와 프로덕션 모드
package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},-
dev
개발 모드로 프로젝트를 실행. 리액트에서의yarn start와 같다. Next.js에서는yarn dev로 실행한다. 단, 리액트와 달리 Hot reloading처럼 개발 환경에 유용한 기능들을 제공한다. -
build
배포용 프로젝트를 빌드. 파이어베이스 배포시build와 같은 역할. -
start
build로 만든 프로젝트를 실행하는 명령어로 실제 서버에 배포되는 환경과 동일.
<Head> 컴포넌트
_App.js
import "../styles/globals.css";
import Head from "next/head";
function MyApp({ Component, pageProps }) {
return (
<div>
<Head>
<title>테스트</title>
</Head>
<h2>Header</h2>
<Component {...pageProps} />
<h2>Footer</h2>
</div>
);
}Next.js에서는 index.html 파일이 없기 때문에 기존의 <head> 태그에 포함되었던 <Script>나 <meta> 태그를 추가하기 위해서는 next에서 제공하는 <Head> 컴포넌트를 사용해야 한다.
물론 숨겨진 폴더에는 html 파일이 존재한다. 여기서 '없다'의 의미는 정말로 존재하지 않는 게 아니라 개발자가 개발 환경에서 신경 쓸 html 파일이 없다는 의미에 가깝다.
Page와 Routes
페이지 이동
Next.js에서의 페이지는 pages 폴더 안에 있는 컴포넌트들을 의미한다.
- pages/component.js
- pages/folder/component.js
두 경로 모두 파일 기반 라우팅 방식으로 페이지를 생성할 수 있다.
-
Link
import Link from 'next/link' function Home() { return ( <ul> <li> <Link href="/">Home</Link> </li> <li> <Link href="/about">About Us</Link> </li> <li> <Link href="/blog/hello-world">Blog Post</Link> </li> </ul> ) } -
useRouter
import { useRouter } from 'next/router' function Home() { return ( <ul> <li onClick={() => {router.push("/")}}>Home</li> <li onClick={() => {router.push("/about")}}>About Us</li> <li onClick={() => {router.push("/blog/hello-world")}}>Blog Post</li> </ul> ) }useRouter는query메서드를 통해 dynamic routes를 지원한다. 파일명을[id]로 변경하면 사용이 가능하다.pages/post/[id]
const Post = () => { const router = useRouter() const { id } = router.query return <p>Post: {id}</p> }
API Routes
Node 서버 없이 API 생성과 배포를 지원하는 기능. DB와 시크릿 환경 변수에 접근할 수 있다. 페이지와 마찬가지로 pages/api/* 경로에서 API를 생성한다.
pages/api/test.js
export default function handler(req, res) {
res.status(200).json({ name: 'John Doe' })
}useRouter와 마찬가지로 dynamic route를 지원한다.
pages/api/test/[id].js
export default function handler(req, res) {
const { query } = req;
const { id } = query;
res.status(200).json({ name: "test", id });
}단, pages/api 하에 속한 파일들은 빌드시에 클라이언트 번들에 포함되지 않는다. Next.js가 파일 용량을 자동으로 최적화 해주고 있기 때문이다.
