App Router에서는 params를 getServerSideProps를 거치지 않고도 페이지 컴포넌트에서 쓸 수 있다.

앱라우터에서는 아래처럼 getServerSideProps 등을 거치지 않고도 params객체를 꺼내 쓸 수 있다.

// app/[id]/page.tsx

interface PageProps {
  params: {
    id: string;
  };
}

const Page = ({ params }: PageProps) => {
  return (
    <div>
      <h1>Post ID: {params.id}</h1>
    </div>
  );
};

export default Page;

 

 

페이지 라우터에서는 getServerSideProps에서 context객체에서 추출한 값을

{ props: { ... }} 내에 리턴해주는 것을

페이지 컴포넌트에서 또 받아야 한다.

어휴 번거로워..

// pages/[id].tsx

import { GetServerSideProps } from 'next';

interface PageProps {
  id: string;
}

const Page = ({ id }: PageProps) => {
  return (
    <div>
      <h1>Post ID: {id}</h1>
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { id } = context.params;

  return {
    props: {
      id,
    },
  };
};

export default Page;