Skip to content
Nest module for Next.js
TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
.prettierrc
LICENSE
README.md
circle.yml
index.d.ts
package.json
tsconfig.json
yarn.lock

README.md

Nest module for Next.js

Use Next.js with a Nest.js server.

Why?

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

Install

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

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

Usage

In your src/app.module.ts:

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

@Module({
  imports: [
    NextModule.register({
      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 tsconfig.build.json 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'

@Controller()
export class AppController {
  @Get('/some-page')
  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

License

MIT.

You can’t perform that action at this time.