Next.jsをSSRでビルドコマンドを生成する

#tech

自分はいつもVercelにdeployしているので、$vercel --prodで終わりなのだが、ある仕事で、AWSのどっかにSSRを載せるために、ビルドコマンドを生成してね〜って言われて、は？ってなったので、その議事録

基本は、npm run startで終わりのはず

• どのディレクトリをあげるのか？
• .nextというディレクトリかな？

あとは環境変数をbuild時に決定する

• local
• staging
• production

基本は.env.productionファイルが読み込まれるの

https://github.com/vercel/next.js/issues/12772

• これによると、env-cmdというライブラリを使って、環境変数ごとにbuildできるようにする

  "build:stg": "env-cmd -f .env.stg next build",
    "build:prod": "env-cmd -f .env.prod next build",

こんな感じでnpm scriptを作ったけど、読み込まれるのは.env.localなの謎い

build時に使う環境変数を決める
https://zenn.dev/jj/articles/next-js-env-best-practice

• 結局はこれ
• 環境ごとのjsonファイルを作成した

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
  env: {
    ...require(`./config/${process.env.APP_ENV || 'local'}.json`),
  },
};

module.exports = nextConfig;

環境ごとにファイルを作成する

{
 "API_KEY": ''
}

{
  "API_KEY": ''
 }