Next.jsのbuild時、特定のURLを除外する方法
2024.7.28
2024.8.1
この記事は約2分で読めます
筆者：三好アキ（専門用語なしでプログラミング）
▶︎ 三好アキの著書一覧はこちら
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フォルダで、フルスタックアプリを自力で作る力を手にいれる】
Amazonのページに移動する
✤ 筆者 ✤
三好アキ（専門用語なしでプログラミング）
「専門用語なし」のメソッドで1,200人以上のビギナーをフロントエンド開発入門に成功させる。翔泳社『動かして学ぶ！Next.js/React開発入門』（韓国でも出版）など著書25冊以上。Amazonベストセラー1位複数回獲得。
React、Next.js、TypeScriptなどの最新情報や初心者向けコンテンツを、無料メルマガ配信中。メールアドレスだけで登録可 ▶︎ 無料メルマガ登録