🦾

Next.js (3): Redirect / Rewrites / .envファイル

2022/03/20に公開

Next.js

Redirect / Rewrites

Redirect

URLを書き換えます。
以下の例だと、古いパスを新しいパスに書き換えてリダイレクトさせています。

{
  source: "/old-path/:path*",
  destination: "/new-path/:path*",
  permanent: false,

}

また正規表現を使ってリダイレクトすることもできます。
以下は /post/123であれば、/news/123にリダイレクトさせています。
数字だけなので、/post/abcはリダイレクト対象ではないです。

module.exports = {
  async redirects() {
    return [
      {
        source: '/post/:slug(\\d{1,})',
        destination: '/news/:slug', // Matched parameters can be used in the destination
        permanent: false,
      },
    ]
  },
}

Rewrite

URLを書き換えないです。
以下の例だと、URL /api/moviesに行くと、映画APIにAPIキーを渡すURLに変わります。
ブラウザ上のURLは/api/moviesのままです。

{
  source: "/api/movies",
  destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
},

next.config.jsの設定

rewrite, redirectの設定はnext.config.jsファイルに以下のようにかけます。
rewriteで使っているAPI_KEYはenvファイルに書いてあるものを呼び出しています。

next.config.js

/** @type {import('next').NextConfig} */

const API_KEY = process.env.API_KEY;

const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/old-path/:path*",
        destination: "/new-path/:path*",
        permanent: false,
      },
    ];
  },
  async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
    ];
  },
};

module.exports = nextConfig;

ENVファイル

先ほどAPIのkeyをenvファイルに書いたと言いました。
envファイルは以下のように書くと、

env

API_KEY=hogehoge

このようにprocess.envのように取得できます。

const API_KEY = process.env.API_KEY;

envファイルの種類は多くあり、NODE_ENVによって呼べるファイルの優先順位が異なります。
以下の環境でそれぞれ上から優先して呼ばれます。
.localがついてるものはgit管理しません。

NODE_ENV=production*
本番環境: next start

.env.production.local
.env.local
.env.production
.env

NODE_ENV=development
開発環境: next dev

.env.development.local
.env.local
.env.development
.env

NODE_ENV=test
テスト環境

.env.test.local
.env.test
.env

Redirect / Rewrites

Redirect

Rewrite

next.config.jsの設定

ENVファイル

Discussion