Next.jsのbuild時、特定のURLを除外する方法
2024.7.28
2024.8.1
この記事は約2分で読めます
この記事の筆者：三好アキ
🟢 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
🟢『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ！Next.js/React開発入門（翔泳社／*韓国でも出版）』著者。
▼ Amazon著者ページはこちら
amazon.co.jp/stores/author/B099Z51QF2
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のページに移動する
▼【無料フロントエンド・ガイド】は下記ページで受け取れます。
🟩 フロントエンド開発者入門ガイド【無料配布中】
最初にこれが知りたかった！
フロントエンド初心者が必ず押さえておきたい ― 『挫折しない勉強法』とその具体的ステップ、無料配布中。
（*名前不要・メールアドレスだけで受け取り可能です）
関連記事
