`next/router` → `next/navigation`

Page Router

import { useRouter } from "next/router";

export default function PostPage() {
  const router = useRouter();
  const { id } = router.query; // URL 파라미터 접근

  const handleClick = () => {
    router.push("/posts"); // 페이지 이동
  };

  return <button onClick={handleClick}>목록으로</button>;
}

useRouter 하나로 다 됐다. 쿼리 파라미터도, 페이지 이동도, 현재 경로 확인도 전부 이 훅 하나에서 꺼내 썼다.

App Router에서는

import { useRouter } from "next/navigation";
import { useParams } from "next/navigation";
import { useSearchParams } from "next/navigation";
import { usePathname } from "next/navigation";

export default function PostPage() {
  const router = useRouter();       // 페이지 이동 전용
  const params = useParams();       // 동적 경로 파라미터 (/posts/[id])
  const searchParams = useSearchParams(); // ?query=xxx 같은 쿼리스트링
  const pathname = usePathname();   // 현재 경로

  const id = params.id;
  const query = searchParams.get("query");

  const handleClick = () => {
    router.push("/posts");
  };

  return <button onClick={handleClick}>목록으로</button>;
}

역할이 훅별로 명확하게 분리됐다.
처음엔 "왜 이렇게 쪼갰지?" 싶었는데, 쓰다 보니 오히려 의도가 명확해서 나쁘지 않다.
useRouter만 있으면 이게 이동용인지, 경로 읽기용인지 코드만 봐서는 바로 안 보이는데, 분리되면 그게 해소된다.

주의할 점

useRouter는 여전히 존재하지만, import 경로가 다르다.

마이그레이션할 때 이걸 놓치면 런타임 에러가 아니라 동작은 하는데 이상하게 되는 상황이 생긴다.
특히 router.query를 그대로 쓰면 App Router에선 항상 undefined가 나와서 한참 헤맨 적 있다.

API Routes → Route Handlers

Page Router

// pages/api/posts.ts
import type { NextApiRequest, NextApiResponse } from "next";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === "GET") {
    res.status(200).json({ message: "hello" });
  } else if (req.method === "POST") {
    const body = req.body;
    res.status(201).json({ created: true, data: body });
  }
}

pages/api/ 아래에 파일을 만들면 자동으로 API 엔드포인트가 됐다.
핸들러 하나에서 req.method로 분기치는 방식.
구조는 단순한데, 분기가 많아지면 핸들러 하나가 꽤 길어지는 단점이 있었다.

App Router에서는 — Route Handler

// app/api/posts/route.ts
import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest) {
  return NextResponse.json({ message: "hello" }, { status: 200 });
}

export async function POST(req: NextRequest) {
  const body = await req.json();
  return NextResponse.json({ created: true, data: body }, { status: 201 });
}

HTTP 메서드 이름 그대로 함수를 export하면 된다.
GET, POST, PUT, DELETE, PATCH 다 된다.

이 방식이 개인적으로는 훨씬 낫다고 생각한다.
if-else로 메서드를 분기치는 것보다 함수 단위로 분리되어 있으니 가독성도 좋고, 테스트 작성할 때도 편하다.

동적 경로 처리도 달라진다

// app/api/posts/[id]/route.ts
import { NextRequest, NextResponse } from "next/server";

export async function GET(
  req: NextRequest,
  { params }: { params: { id: string } }
) {
  const { id } = params;
  return NextResponse.json({ postId: id });
}

Page Router에서는 req.query.id로 꺼냈는데, Route Handler에서는 두 번째 인자로 params가 넘어온다.
타입도 명확하게 잡히고, 실수할 여지가 줄어든다.

App Router 로 변경하면서 - Route