QDD 1-3. useRouter, API Routes, getStaticProps, getStaticPaths

📍Q8. 특정 URL에서만 특정 컴포넌트를 렌더링하려면?

✅Next.js의 useRouter 훅을 사용

- React 훅이므로 컴포넌트 내부에서만 사용 가능!

- 사용 전에 아래 처럼 선언 필요

import { useRouter } from 'next/router'

function ActiveLink({ children, href }) {
  const router = useRouter(); // 선언
  const style = {
    marginRight: 10,
    color: router.asPath === href ? 'red' : 'black',
  };
  // ...
}

 

router 객체의 pathname, asPath, route 프로퍼티를 이용하면 현재 페이지의 파라미터를 받을 수 있다

query 프로퍼티를 이용하면 query string도 받을 수 있다

 

이를 통해 특정 페이지에서 원하는 컴포넌트를 렌더링 할 수 있다

 

📍Q9. Next.js 에서 API를 만드려면?

pages/api 폴더 내의 파일들은 /api/* 에 매핑되며 페이지 대신 API 엔드 포인트로  처리된다

- sever-side 로만 작동하며 client-side 번들 크기를 늘리지 않는다

 

pages/api/user.ts 를 아래처럼 만들고

export default (req, res) => {
  res.status(200).json({ name: "John Doe" });
}

 

app에서 /api/user 에 접속하면, {"name":"John Doe"} 를 response로 띄워준다

 

pages/api/forums/[forumsId].ts 파일을 만들고, api를 만든다

import type { NextApiRequest, NextApiResponse } from "next";
const { forums } = require("./data");

interface ForumType {
  id: string;
  name: string;
  place: string;
  address: string;
  host: string;
  date: string;
  time: string;
  description: string;
  image: string;
}

interface ErrorType {
  message: string;
}

export default (
  req: NextApiRequest,
  res: NextApiResponse<ForumType[] | ErrorType>,
) => {
  const forum = forums.filter((item) => item.id === req.query.forumId);

  if (req.method === "GET") {
    res.status(200).json(forum);
  } else {
    res.setHeader("Allow", ["GET"]);
    res.status(405).json({ message: `Method ${req.method} is not allowed` });
  }
};

그리고, req.query.forumId 를 통해 쿼리 파라미터를 받을 수 있다

 

📍Q10. 다이나믹 라우팅 사용 시 페이지 경로를 미리 생성하려면?

✅getStaticPaths 를 사용하여, 지정된 모든 page path를 정적으로 프리렌더링할 수 있다

- getStaticPaths를 사용하려면 getStaticProps도 사용해야 한다
- fallback을 설정할 수 있다 (디폴트 : false => 404 page로 연결)

 

📍참고

 

https://nextjs.org/docs/api-reference/next/router

next/router | Next.js

 

https://nextjs.org/docs/api-routes/introduction

API Routes: Introduction | Next.js

 

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

Data Fetching: getStaticPaths | Next.js