Next.jsのbuild時、特定のURLを除外する方法
2024.7.28
2024.8.1
この記事は約2分で読めます
この記事の筆者：三好アキ
🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
🔹 Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。
Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2
React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。登録はこちらから → 無料メルマガ登録
build時に特定のURLを除外するコード（Next.js）
build時に特定のURLを除外する方法。
一番簡単なのはもちろん、該当のフォルダ（or ファイル）自体をappフォルダやpagesフォルダから取り除いてbuildする方法です。
しかしこれ以外の方法はないのかと、サッと調べてみました。
見た限りでは、Next.jsで特定のURLをnpm run buildコマンド実行時に除外するコードはないようです。
しかし「ユーザーからのアクセスを妨げる」という効果を実現する方法はいくつかあります。
そのひとつはpageExtensionsを使う方法ですが、もっとシンプルなのはredirectsを使うもので、コードは次のようになります（下記はnext.configの拡張子が.mjsのケース）。
// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
redirects: () => {
if(process.env.NODE_ENV === "production"){
return[
{
source: "/hobby/:path*",
destination: "/",
permanent: true,
}
]
}else{
return []
}
},
reactStrictMode: true,
}
export default nextConfignext.configの拡張子が.jsのケースでは、最終行のexport部分のコードが変わり、次のようになります。
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
redirects: () => {
if(process.env.NODE_ENV === "production"){
return[
{
source: "/hobby/:path*",
destination: "/",
permanent: true,
}
]
}else{
return []
}
},
reactStrictMode: true,
}
module.exports = nextConfignext.configに上記コードを書くと、build後の公開時（production）、/hobbyを含む/hobbyから下のURLへのアクセスは、すべてトップページの/にリダイレクトされます。
Next.jsバックエンドAPIのURLなど、手元のコンピューターでの開発時には利用するものの、オンラインでの公開時には存在しなくてもいい、あるいは別の理由で除外したいURLなどを隠すときに使える方法です。
*Next.jsバージョン13以前のPagesフォルダでは、たとえば次のようにdestinationに404と書けば、404ページに遷移します（ファイル名を404.jsとした404ページを用意しておきましょう）。
source: "/hobby/:path*",
destination: "404",
permanent: true,Next.jsについてもっとくわしく知りたい方は、下記教本を参考にしてください。
最新のNext.js Appルータとともに、API（Route Handlers）、MongoDB、JWT、Cloudinaryなどを使って本格的なフルスタックアプリを開発する方法を、ビギナー向けにわかりやすく紹介しています。
Next.jsでつくるフルスタックアプリ
【最新バージョンのNext.jsとAppフォルダで、フルスタックアプリを自力で作る力を手にいれる】
1980円 → 0円
Amazonのページに移動する
メルマガ配信中
（from 三好アキ／エンジニア）
React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
（*配信はいつでも停止できます）
関連記事
