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

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.