Skip to content
Nest module for Next.js
Branch: master
Clone or download
Latest commit 50fe757 Jan 5, 2020
Type Name Latest commit message Commit time
Failed to load latest commit information.
src feat: init Jan 5, 2020
LICENSE feat: init Jan 5, 2020
circle.yml feat: init Jan 5, 2020
package.json chore: update readme Jan 5, 2020
yarn.lock feat: init Jan 5, 2020

Nest module for Next.js

Use Next.js with a Nest.js server.


Allow you to manage both your frontend and backend in a single repository. And you maintain one domain instead of two: and


yarn add @nest-module/next next react react-dom

# Following typings are also needed
yarn add @types/react @types/node --dev


In your src/app.module.ts:

import { join } from 'path'
import { NextModule } from '@nest-module/next'

  imports: [
      dev: process.env.NODE_ENV !== 'production',
      // It's recommended to populate your Next.js app in a sub directory 
      // like ./next folder so that it could use its own tsconfig.json
      dir: join(__dirname, '../next')
export class AppModule {}

Then you can use file-system based routing, try populating a page at next/pages/index.tsx:

export default () => <div>Hello Next!</div>

And configure your root to include src folder only:

  "include": ["src"]

Next.js will automatically create another TS config file at next/tsconfig.json, we want the root TS config to be applied to your Nest server only.

Now start your Nest server and navigate to the homepage and you will see Hello Next!.

Manually render a page

Besides automatic routing via pages folder, you can also use res.nextRender inside a Nest route handler to render a Next.js page:

import { Res, Controller, Get } from '@nestjs/common'
import { Response } from 'express'

export class AppController {
  anotherPage(@Res() res: Response) {
    res.nextRender('/another-page', {
      // optional route query
      message: 'another page'

This route handler will render pages/another-page.tsx:

const AnotherPage = ({ query }) => {
  return <div>{query.message}</div>

// `getInitialProps` is required if you want to access `query` in your page component
AnotherPage.getInitialProps = ctx => {
  return { query: ctx.query }

export default AnotherPage



You can’t perform that action at this time.