API_KEY 숨기기

// next.config.js
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async redirects() {
    return [
      {
        source: "/old-blog/:path*",
        destination: "/new-sexy-blog/:path*",
        permanent: false,
      },
    ];
  },
  async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
      {
        source: "/api/movies/:id",
        destination: `https://api.themoviedb.org/3/movie/:id?api_key=${API_KEY}`,
      },
    ];
  },
};

rewrites 함수에서 source로 요청하면 사실 destination으로 요청해서 요청 URL를 숨긴다.

router.push()

router.push(
  {
    pathname: `/movies/${id}`,
    query: {
      title,
    },
  },
  `/movies/${id}`
);

/movies/${id}?title=title로 보여지는게 아니라 /movies/${id}로 보여진다.

Link에서도 마찬가지

<Link
  href={% raw %}{{
    pathname: `/movies/${movie.id}`,
    query: {
      title: movie.title
    }
  }}{% endraw %}
  as={`/movies/${movie.id}`}
>

getServerSideProps

export default function index({ results }) {
  return <div>{results}</div>;
}
export async function getServerSideProps() {
  const { results } = await (
    await fetch(`http://localhost:3000/api/movies`)
  ).json();
  return {
    props: {
      results,
    },
  };
}

export default function Detail({ params }) {
  const router = useRouter();
  const [title, id] = params || [];
  return (
    <div>
      <Seo title={title} />
      <h4>{title}</h4>
    </div>
  );
}
export function getServerSideProps({ params: { params } }) {
  return {
    props: {
      params,
    },
  };
}

pre-render할 때 클라이언트 입장에서는 파라미터를 넣어줬어도 파라미터 값을 모른다.
서버에서 알 수 있도록 props를 넘겨서 해결.