Next.jsで前のURLを取得する方法

useRouterフックを使用する方法:

Next.jsには、useRouterフックを使用して現在のURLやルートに関する情報にアクセスすることができます。前のURLを取得するには、以下のコードを使用します。

import { useRouter } from 'next/router';
function MyComponent() {
  const router = useRouter();
  const previousUrl = router.asPath;
  // previousUrlを使って何か処理を行う
  return (
    // コンポーネントのレンダリング
  );
}

上記の例では、useRouterフックを使ってrouterオブジェクトを取得し、router.asPathプロパティを使用して前のURLを取得しています。これにより、前のURLを変数previousUrlに格納することができます。

サーバーサイドで前のURLを取得する方法:

Next.jsでは、サーバーサイドでページをレンダリングすることもできます。サーバーサイドで前のURLを取得するには、以下のようなコードを使用します。

export async function getServerSideProps(context) {
  const previousUrl = context.req.headers.referer || '/';
  // previousUrlを使って何か処理を行う
  return {
    props: {
      // ページコンポーネントに渡すデータ
    },
  };
}

上記の例では、getServerSidePropsという特別な関数を使用してサーバーサイドで前のURLを取得しています。context.req.headers.refererを使用することで、リクエストヘッダーから前のURLを取得できます。

これらの方法を使用することで、Next.jsアプリケーションで前のURLを取得することができます。適切な方法を選択し、アプリケーションの要件に応じて利用してください。