😸
NestJSを使ってExportしたNext.jsをSPAとして配信するときにすること
実装
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したフォルダごと配信する
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の配信が出来ます。
Discussion