Next.jsのホームページとGatsbyJSのブログを同じドメインに

2022年11月27日 • ☕️ 3 min read

サブディレクトリ

ホームページとブログを別々の技術スタックとプロジェクトで開発することは珍しいことではありません。しかし、同じドメインの直下にデプロイする（blogをサブディレクトリへ）のが問題となります。一般的な回避策はサブディレクトリより、サブドメインにすることでしょう（xxxx.com/blogよりblog.xxxx.com）。ただ、そうするとカッコよくなくなります（個人感）。

Next.js+GatsbyJS

自分のHPとブログは分かれています。元々全部GatsbyJS+Netlifyの技術スタックだったが、最近HPの方をReactのフレームワークの王者Next.jsへ切り替えました。サブディレクトリを実現するのに苦労しました。その方法を共有します。

問題

Next.jsとGatsbyJSがスラッシュに対するデフォルトの処理が異なる。

Next.jsのデフォルトは自動的にURLの最後のスラッシュを削除します（https://nextjs.org/docs/api-reference/next.config.js/trailing-slash）。GatsbyJSは真逆でスラッシュを追加してくれます（https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/#trailingslash）。

Next.jsの中でredirectsを設定するだけでは無限リダイレクトになり、うまく動きません。

Next.js側の設定

redirectsの設定はNext.jsのドキュメントの通りにやってもダメです。下記のように設定しましょう。

next.config.js

Copy

// change it to your blog site's domain
const BLOG_URL = "http://127.0.0.1:9000";
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async rewrites() {    return [      {        source: "/blog/",        destination: `${BLOG_URL}/blog/`,      },      {        source: "/blog/:slug*",        destination: `${BLOG_URL}/blog/:slug*`,      },    ];  },};

module.exports = nextConfig;

URLにスラッシュをつけてくれるように、trailingSlashをtrueにする

next.config.js

Copy

// change it to your blog site's domain
const BLOG_URL = "http://127.0.0.1:9000";

/** @type {import('next').NextConfig} */
const nextConfig = {
  trailingSlash: true,  reactStrictMode: true,
  swcMinify: true,
  async rewrites() {
    return [
      {
        source: "/blog/",
        destination: `${BLOG_URL}/blog/`,
      },
      {
        source: "/blog/:slug*",
        destination: `${BLOG_URL}/blog/:slug*`,
      },
    ];
  },
};

module.exports = nextConfig;

GatsbyJS側の設定

path prefixでサブディレクトリへデプロイできるように設定する

基本的にGatsbyJSのドキュメントの通りやれば問題ありません

https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/
trailingSlashをneverにする

gatsby-config.js

Copy

/**
 * @type {import('gatsby').GatsbyConfig}
 */
module.exports = {
  trailingSlash: `never`,  pathPrefix: `/blog`,

ローカルで試してみる

ブログのGatsbyJSを起動しましょう。

Copy

PREFIX_PATHS=true gatsby build
PREFIX_PATHS=true gatsby serve -H 0.0.0.0

Next.jsを起動しましょう。

Copy

npm run dev

http://localhost:3000/blog/にアクセスすると、無事に表示されるでしょう。F5でリフレッシュしても無限リダイレクトの問題が発生しません。

ブログをサブディレクトリへのデプロイの準備

GatsbyJSのブログの部分をデプロイする時、生成されたhtmlをrootフォルダではなく、サブフォルダのblogへ移動しなければいけません。

しかし、GatsbyJSはいまだにpublic以外のフォルダへコンパイル済みのファイルをexportすることをサポートしませんので、移動するプラグインを入れる必要があります。

https://www.npmjs.com/package/gatsby-plugin-output

gatsby-config.js

Copy

/**
 * @type {import('gatsby').GatsbyConfig}
 */
module.exports = {
  trailingSlash: `never`,
  pathPrefix: `/blog`,
  plugins: [
    ...
    // pluginsの一番下に置く    `gatsby-plugin-output`   ]

コンパイルスクリプトの追加します。

package.json

Copy

{
  "scripts": {
    "build:vercel": "OUTPUT_DIR=dist/blog PREFIX_PATHS=true gatsby build"  }
}

そして、対象フォルダをdistに設定するだけでOKです。

完了

やや煩雑ですが、別々で管理すると柔軟性が高いのでぜひお試しください。

サンプルプロジェクトはこちらとなります。

https://github.com/thundermiracle/next-with-gatsby