How can I integrate next with nest?

Question

I tried to include next in the render of the custom adapter function:

// custom.adapter.ts
import { ExpressAdapter } from '@nestjs/platform-express';
import { Response } from 'express';
import next  from 'next';

const dev = true;
const nextApp = next({ dev });
const handle = nextApp.getRequestHandler();

export class NextAdapter extends ExpressAdapter {
    constructor() { super() }
    
    render(res: Response, view: string, options: any) {
        const { req } = options;
        return new Promise<void>(async (resolve) => {
            nextApp.prepare().then(async () => {

                if (req.query = '/a') {
                    await nextApp.render(req, res, '/a', req.query)
                } else {
                    handle(req, res);
                }
                resolve();
            });
        });
    }
}

but this did not work, I try to get the page and I get a lot of 404 errors.

// main.ts
import { NestFactory } from '@nestjs/core';
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
import { AppModule } from './app.module';
import { NextAdapter } from './next.adapter';



async function bootstrap() {
  const app = await NestFactory.create(AppModule, new NextAdapter());

  const options = new DocumentBuilder()
    .setTitle('Blog Rest API dosc')
    .build();
  const document = SwaggerModule.createDocument(app, options);
  SwaggerModule.setup('api', app, document);

  await app.listen(3000);
}

bootstrap();

All the code I posted on github https://github.com/MiiZZo/nest-next/tree/master/nextapp

Answer 1

One solution would be to go with nest-next: https://www.npmjs.com/package/nest-next Detailed documentation is on their page, but here is the relevant code to include the next app rendering inside nest js:

import { Module } from '@nestjs/common';
import Next from 'next';
import { RenderModule } from 'nest-next';

@Module({
  imports: [
    RenderModule.forRootAsync(Next({ dev: process.env.NODE_ENV !== 'production' })),
    ...
  ],
  ...
})
export class AppModule {}

Answer 2

user nest-next npm package

import { Module, MiddlewareConsumer } from "@nestjs/common";
import { RenderModule } from "nest-next";
import { resolve } from "path";
import Next from 'next';
import { AppController } from "./app.controller";
import { HelperModule } from "./helper/helper.module";
import { LoggerMiddleware } from "./middleware/logger.middleware";

@Module({
  imports: [
    HelperModule,
    RenderModule.forRootAsync(
      Next({
        dev: process.env.NODE_ENV !== 'production',
        dir: resolve(__dirname, '../../../frontend'), //add front end path
      })
    ),
  ],
  controllers: [AppController],
})

export class AppModule {
  configure(consumer: MiddlewareConsumer) {
    consumer
      .apply(LoggerMiddleware)
      .forRoutes('*') // for all route path
  }
  

};