😸

NestJSを使ってExportしたNext.jsをSPAとして配信するときにすること

2023/01/22に公開約1,200字

実装

NestJSをAPIサーバー兼Webサーバー(Next.jsで吐き出したHtmlファイルを配信する)として利用したい時のためのTipsです。

NestJS側

app.module.ts
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ServeStaticModule } from '@nestjs/serve-static';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: `${__dirname}/client_path`,
      // 存在しないrouteを叩いたときにエラーを出すコード
      serveStaticOptions: {
        fallthrough: false,
      },
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

Server Staticを使用して、rootPathにある、Next.jsがExportしたフォルダごと配信する
https://docs.nestjs.com/recipes/serve-static

Next.js側

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
...
  trailingSlash: true,
...
};

module.exports = nextConfig;

NestJSのserverStaticは
URLでhttp:// localhose:3000/aboutと入力するとout/about/index.htmlを返却しようとします。
Next.jsでは通常 pages/about.tsx -> out/about.html としてExportされます。
NestJSでは探しにいったpathにファイルがないとエラーを吐き出してしまいます。

TrαilingSlash: trueにすることで 
pages/about.tsx -> out/about/index.html
を実現することができて、問題なくNestJS側でNext.jsの配信が出来ます。

https://nextjs.org/docs/api-reference/next.config.js/trailing-slash

Discussion

ログインするとコメントできます