kanta's spike

Nest.jsで作成したアプリをHugoで作成したブログに公開したい。 ¹

解決策

Next.jsでアプリをStatic Exportし、その結果を Hugoのstaticディレクトリに格納すれば良い。

手順を、Nest.jsで作成したアプリ ² をstatic/tictactoeに格納する場合を例にして説明する。

1. Next.jsのプロジェクト内で、next.config.jsに以下を設定し、

   /** @type {import('next').NextConfig} */
   const nextConfig = {
       output: 'export',
       basePath: '/portfolio/tictactoe',
   }
   
   module.exports = nextConfig
   

2. npm run buildを実行する

3. outディレクトリにStatic Exportされた結果が格納される

4. outディレクトリをHugoのstatic配下にコピーする

   cp -r ./out ~/blog/static/tictactoe
   

5. Hugoのサイトへ移動し、サーバーを起動する

   $ cd ~/blog
   $ hugo server
   Web Server is available at http://localhost:1313/portfolio/ (bind address 127.0.0.1)
   Press Ctrl+C to stop
   

6. http://localhost:1313/portfolio/tictactoe/にアクセスするとアプリが表示される

7. hugoでスタティックサイトを生成し、GitHubにプッシュすると https://kantas-spike.github.io/portfolio/tictactoe/でアプリを表示できる。

参考

• Static Export した Tic-Tac-Toeを Hugoで公開したい · kantas-spike/learn_react · GitHub
• Deploying: Static Exports | Next.js
• next.config.js Options: basePath | Next.js
• Deploying: Static Exports - Unsupported Features | Next.js