[Next.js] [Page Router] Page와 Routes

설치하기

 

Next.js 12 에는 페이지라우터 방식을 사용한다. 다음과 같이 필요에 따라 패키지를 설치한다.

 

npx create-next-app [프로젝트 이름]

➜  ~ npx create-next-app pages-test
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … [No] / Yes // NO [페이지라우터] 방식
✔ Would you like to customize the default import alias? … No / Yes

 

---

개발모드와 프로덕션 모드 

 

// package.json
...
"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
...

dev : next dev 개발모드로 프로젝트를 실행

build : next build 제품 배포 용도로 프로젝트를 빌드

start : next start build 를 통해 만들어진 프로젝트를 실행하는 명령어. 실제 운영 서버에서 배포되는 환경과 동일하다.

 

---

Next.js 에서의 페이지

 

pages 디렉토리 안에 있는 React Component 를 의미하며, 페이지를 만들고 싶다면 pages 폴더 아래에 React Component 를 만들기만 하면 된다. 이 때, 폴더 구조에 따라 자동으로 URL 이 결정되는 파일 기반 라우팅 시스템을 따른다.

 

Index Routes

// pages/index.js -> example.com/
export default function Index() {
	return <div>Index Page</div>
}

// pages/about/index.js -> example.com/about 
export default function About() {
	return <div>About Page</div>
}

// pages/about.js -> example.com/about 위와 동일
export default function About() {
	return <div>About Page</div>
}

 

Nested Routes

 

폴더가 중첩되어도 아래처럼 사용할 수 있다.

// pages/blog/first-post/index.js → example.com/blog/first-post
export default function Blog() {
	return <div>first-post Page</div>
}

 

Dynamic Routes

 

동적으로 URL 이 변경되어야 하는 경우에도 아래처럼 사용할 수 있다. 

 

// pages/posts/[postId].js -> example.com/posts/1, example.com/posts/2 
import { useRouter } from 'next/router'
 
export default function Page() {
  // 내장되어 있는 router를 이용하면 query parameter에 접근 가능합니다.
  const router = useRouter()

  return <p>Post: {router.query.postId}</p>
}

 

Page Navigation

 

React에서 사용하는 react-router-dom 을 대체하는 next/link 와 next/router 가 내장되어있음. (Link를 권함... )

 

import "@/styles/globals.css";
import Link from "next/link";
import { useRouter } from "next/router";

export default function App({ Component, pageProps }) {
  const router = useRouter();
  return (
    <>
      <h1>Header</h1>
      <div onClick={() => router.push("/")}>Home</div>
      <Link href="/about">about</Link>
      <Component {...pageProps} />
    </>
  );

 

API Routes

 

Next.js 프로젝트에서 복잡한 서버 설정없이, api 를 만들어 배포하는 기능으로 pages/api 폴더 아래에 만들 수 있으며 파일 기반 라우팅 시스템과 동일한 경로를 따른다.

 

// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

 

 

Dynamic API 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 });
}

 

사용사례 - 외부 API 주소 마스킹(masking)

 

// pages/api/todos/[id].js

export default async function handler(req, res) {
  const { query } = req;
  const { id } = query;

	const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)

	const todo = await response.json()

  res.status(200).json({ data: todo });
}

 

pages/api 아래 있는 파일들은 yarn build를 통해서 프로젝트가 빌드 될 때 클라이언트 번들에 포함되지 않는다.

Next.js가 파일 용량을 자동으로 최적화해주는 좋은 사례임.