https://github.com/egoist/nest-next

Nest module for Next.js
https://github.com/egoist/nest-next

api nestjs nextjs nodejs react ssr universal

Last synced: 3 months ago
JSON representation

Nest module for Next.js

• Host: GitHub
• URL: https://github.com/egoist/nest-next
• Owner: egoist
• License: mit
• Created: 2020-01-05T07:25:08.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T13:24:34.000Z (over 1 year ago)
• Last Synced: 2024-03-04T12:37:05.398Z (4 months ago)
• Topics: api, nestjs, nextjs, nodejs, react, ssr, universal
• Language: TypeScript
• Homepage:
• Size: 1.57 MB
• Stars: 38
• Watchers: 3
• Forks: 1
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-github-star - nest-next

README

        
# Nest module for Next.js

Use [Next.js](https://nextjs.org/) with a [Nest.js](https://nestjs.com/) 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

```bash

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`:

```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`:

```tsx

export default () => 
Hello Next!

```


And configure your root `tsconfig.build.json` to include `src` folder only:

```json

{

  "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:

```js

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`:

```tsx

const AnotherPage = ({ query }) => {

  return 
{query.message}

}


// `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.