[Nextjs] 2023.11.18

SSR 방식이라서 에러가 생각보다 많이 난다..
Dom을 불러올때도, svg를 사용할때도, Link를 탔다가 돌아올때도...
오늘은 Nextjs 라우팅 방법에 조금 더 공부했다.

이렇게 동적 라우팅을 하기 위해서는
/app/book/[id]/page.js
이렇게 만든다.

• 컴포넌트는 page.js 와 api 는 route.js 를 사용해야하는것 같다.

동적 라우팅

export default function Book(props) {
  return (
    <div>
      Book Id : {props.params.id}
    </div>
  );
}

api

app 디렉토리 아래 api 디렉토리를 만들고 route.tsx 파일을 만들어 아래처럼 사용한다.
/app/api/route.tsx

import { NextResponse } from "next/server";

export async function GET() {
  const data = {
    pokemon: {
      name: "꼬부기",
    },
  };
  return NextResponse.json({ data });
}

export async function POST(request: Request) {
  const res = await request.json();
  return NextResponse.json({ res });
}

public

public 디렉토리 안에 파일이 있으면 경로는 바로 루트안에 있는 것처럼 사용한다.

• /bookImg.png