Next.js

サブディレクトリをVercelにリバプロしてNext.jsを動かすメモ

取り急ぎメモ

何をしたかったかメモ

  • とあるサイト（Nginx+WordPress）のサブディレクトリだけをNext.jsで動かしたかった
  • SEOも考えないといけないので、hoge.vercel.app のドメインでアクセスできなくしたかった

やったこと

next.config.js を修正

{
  ...
  basePath: isProduction ? SUB_DIRECTORY : '',
  assetPrefix: isProduction ? SUB_DIRECTORY : '',
  // Imageコンポーネントを使う場合は basePath をsrcで指定しなければならない
  publicRuntimeConfig: {
    basePath: isProduction ? SUB_DIRECTORY : '',
  }
  ...
}

routing -> 問題なし
JSまわり -> 問題なし
image -> 問題あり（404になってしまう）

ImageComponentを使うときは手動でサブディレクトリを追加せねばいけないらしい

もともとは basePath の設定でよかったぽいが、最近のバージョンだとダメらしい

参考: https://nextjs.org/docs/api-reference/next.config.js/basepath#images

→ MyImage コンポーネントを作成してごにょごにょした

import getConfig from "next/config";
import Image, { ImageProps } from "next/image";

const { publicRuntimeConfig } = getConfig();

export const MyImage = (props: ImageProps): JSX.Element => {
  // eslint-disable-next-line jsx-a11y/alt-text
  return <Image {...props} src={`${publicRuntimeConfig.basePath || ''}${props.src}`} />;
}

Nginx側でのリバプロ設定

location ^~ /hoge/ {
  proxy_pass https://hoge.vercel.app/hoge/;
}

-Next.js