🔥

Next.jsで、pages配下のindex.tsxのパスルートを変更する方法

2022/02/04に公開

JavaScript

Next.js は、pages 配下のディレクトリ名がそのまま path になります。
これは皆さん当たり前のようにご存知かと思いますが、個人的にあんまり好きじゃ無かったポイントとして、pages 配下の index.tsx が"/"として扱われることがあんまり好きじゃないです。

その理由は、例えば開発規模が大きくなってきた際にディレクトリを分けたりすると思いますが、pages の index.tsx だけ変えられないんです！

home/index.tsx とかにしてしまうと、Next.js の使用上"/"ではなくなりますよね。
今回はそんな個人的に嫌なポイントを他にお持ちの方がいればと思って記事を書きます。

Next.js で、pages 配下の index.tsx のパスルートを変更する方法

結論、公式ドキュメントを見ましょう。
Next.js、さすが！

一応自分の方でもやり方を書いておきます。

pages/home/index.tsx のパスを"/"にしたいとします。

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: "/",
        destination: "/home",
      },
    ];
  },
};

はい、完了です。

後一応補足しておくと、next/link を使う際に href="[path]"となると思いますがそれは"/"のままで大丈夫です。

import Link from "next/link";

<Link href="/">
  <a>Home</a>
</Link>;

こんな感じですね。
シンプル〜！

今回の内容は以上です！
皆さんも良きプログラミングライフを！

Next.js で、pages 配下の index.tsx のパスルートを変更する方法

Discussion