Next.jsで特定のページを削除してリダイレクトの設定をする

Next.jsでウェブサービスを運営していると、ページの構成を変更したい場合や古いコンテンツを新しいページに統合したい場合があります。この記事では、Next.jsで特定のページを削除し、そのURLから他のページへリダイレクトする方法を紹介します。

ステップ 1: 不要なページの削除

まずは、削除したいページのファイル（例えば pages/old-page.js）をプロジェクトから削除します。ファイルを削除することで、そのページへのアクセスができなくなります。

ステップ 2: リダイレクトの設定

削除したページへアクセスしたユーザーを新しいページに自動的にリダイレクトするには、next.config.js ファイルを編集します。このファイルがプロジェクトに存在しない場合は、プロジェクトのルートディレクトリに新しく作成してください。

module.exports = {
  async redirects() {
    return [
      {
        source: '/old-page',
        destination: '/new-page',
        permanent: true,
      },
    ]
  },
}

この設定により、/old-page へのアクセスが自動的に /new-page へリダイレクトされます。permanent: true を設定すると、このリダイレクトが永続的であるとブラウザや検索エンジンに伝え、SEOの観点からも適切に扱われます。一時的なリダイレクトの場合は false にしてください。

ステップ 3: アプリケーションの再デプロイ

変更を行った後、Next.jsアプリケーションを再デプロイする必要があります。これにより、設定が適用され、ユーザーが古いページへアクセスした際に新しいページへ正しくリダイレクトされるようになります。

終わり