Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update custom server examples #24814

Merged
merged 5 commits into from
May 7, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 2 additions & 16 deletions examples/custom-server-express/README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
# Custom Express Server example

Most of the time the default Next.js server will be enough but there are times you'll want to run your own server to customize routes or other kinds of app behavior. Next.js provides [Custom server and routing](https://github.com/vercel/next.js#custom-server-and-routing) options, so you can customize as much as you want.
Most of the time the default Next.js server will be enough but there are times you'll want to run your own server to integrate into an existing application. Next.js provides [a custom server api](https://nextjs.org/docs/advanced-features/custom-server).

Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. In this case we are using express to build a custom router on top of Next.

This example demonstrates a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
Because the Next.js server is a Node.js module you can combine it with any other part of the Node.js ecosystem. In this case we are using express.

## How to use

Expand All @@ -15,15 +13,3 @@ npx create-next-app --example custom-server-express custom-server-express-app
# or
yarn create next-app --example custom-server-express custom-server-express-app
```

### Populate body property

Without the use of body parsing middleware `req.body` will return undefined. To get express to populate `req.body` you need to use middleware within server.js:

```js
app.prepare().then(() => {
const server = express()
server.use(express.urlencoded({ extended: true }))
server.use(express.json())
})
```
8 changes: 0 additions & 8 deletions examples/custom-server-express/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,6 @@ const handle = app.getRequestHandler()
app.prepare().then(() => {
const server = express()

server.get('/a', (req, res) => {
return app.render(req, res, '/a', req.query)
})

server.get('/b', (req, res) => {
return app.render(req, res, '/b', req.query)
})

server.all('*', (req, res) => {
return handle(req, res)
})
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As someone trying to understand how the Next.js custom Express setup works, I have some questions:

If the server.get() path handlers are not needed here, does that mean the server.all() handler will just know how to handle all the paths defined in pages? So I'm assuming we can just define API endpoints here that Express needs to handle and all the application path routing will just work.

If yes, then what's the point of all the app.render in the documentation example? Shouldn't that only be done when file-system routing is disabled? Having it in the basic example makes it look like it's necessary to define all the path handlers.

I'm also confused about what the query parameter is and how and when it is supposed to be used. In the lines deleted here, we were using req.query and that worked fine. But the documentation example shows that query should be taken from the result of parse(req.url, true) and then passed to the app.render. Can't find any explanation of what query parameter is exactly supposed to be and why does app.render need it.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For context, my use case is that we have a fat Express server serving the build folder from create-react-app. Trying to figure out how to migrate to Next.js to do server-rendering.

I'd expect the documentation/examples to have a mention of:

  • Where do the express middlewares fit here?
  • Is it necessary to define path handlers for every route of the application?
  • Where are the response headers supposed to be in a custom server with Next.js? Will express keep handling the headers for every page request or will Next.js headers override that functionality? Are there any conflicts between the two?

Understandably, these questions could be directed to Discussions or StackOverflow but it'd be great if it's possible to figure these answers out from the documentation.

Expand Down
6 changes: 2 additions & 4 deletions examples/custom-server-hapi/README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
# Custom server using Hapi example

Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://github.com/vercel/next.js#custom-server-and-routing) so you can customize as much as you want.
Most of the time the default Next.js server will be enough but there are times you'll want to run your own server to integrate into an existing application. Next.js provides [a custom server api](https://nextjs.org/docs/advanced-features/custom-server).

Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using [Hapi](https://hapijs.com) to build a custom router on top of Next.

The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
Because the Next.js server is a Node.js module you can combine it with any other part of the node.js ecosystem. In this case we are using [Hapi](https://hapijs.com).

## How to use

Expand Down
14 changes: 1 addition & 13 deletions examples/custom-server-hapi/server.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const next = require('next')
const Hapi = require('@hapi/hapi')
const { pathWrapper, nextHandlerWrapper } = require('./next-wrapper')
const { /* pathWrapper, */ nextHandlerWrapper } = require('./next-wrapper')
timneutkens marked this conversation as resolved.
Show resolved Hide resolved

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
Expand All @@ -10,18 +10,6 @@ const server = new Hapi.Server({
})

app.prepare().then(async () => {
server.route({
method: 'GET',
path: '/a',
handler: pathWrapper(app, '/a'),
})

server.route({
method: 'GET',
path: '/b',
handler: pathWrapper(app, '/b'),
})

server.route({
method: 'GET',
path: '/_next/{p*}' /* next specific routes */,
Expand Down
6 changes: 2 additions & 4 deletions examples/custom-server-koa/README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
# Custom Koa Server example

Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://nextjs.org/docs/advanced-features/custom-server) so you can customize as much as you want.
Most of the time the default Next.js server will be enough but there are times you'll want to run your own server to integrate into an existing application. Next.js provides [a custom server api](https://nextjs.org/docs/advanced-features/custom-server).

Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using [Koa](https://koajs.com/) to build a custom router on top of Next.

The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
Because the Next.js server is a Node.js module you can combine it with any other part of the Node.js ecosystem. In this case we are using [Koa](https://koajs.com/).

## How to use

Expand Down
10 changes: 0 additions & 10 deletions examples/custom-server-koa/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,6 @@ app.prepare().then(() => {
const server = new Koa()
const router = new Router()

router.get('/a', async (ctx) => {
await app.render(ctx.req, ctx.res, '/a', ctx.query)
ctx.respond = false
})

router.get('/b', async (ctx) => {
await app.render(ctx.req, ctx.res, '/b', ctx.query)
ctx.respond = false
})

router.all('(.*)', async (ctx) => {
await handle(ctx.req, ctx.res)
ctx.respond = false
Expand Down
6 changes: 2 additions & 4 deletions examples/custom-server-polka/README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
# Custom [Polka](https://github.com/lukeed/polka) Server example

Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://github.com/vercel/next.js#custom-server-and-routing) so you can customize as much as you want.
Most of the time the default Next.js server will be enough but there are times you'll want to run your own server to integrate into an existing application. Next.js provides [a custom server api](https://nextjs.org/docs/advanced-features/custom-server).

Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using express to build a custom router on top of Next.

The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
Because the Next.js server is a Node.js module you can combine it with any other part of the Node.js ecosystem. In this case we are using Polka.

## How to use

Expand Down
4 changes: 0 additions & 4 deletions examples/custom-server-polka/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,6 @@ const handle = app.getRequestHandler()
app.prepare().then(() => {
const server = polka()

server.get('/a', (req, res) => app.render(req, res, '/a', req.query))

server.get('/b', (req, res) => app.render(req, res, '/b', req.query))

server.all('*', (req, res) => handle(req, res))

server.listen(port, (err) => {
Expand Down
12 changes: 1 addition & 11 deletions examples/custom-server-typescript/.babelrc
Original file line number Diff line number Diff line change
@@ -1,13 +1,3 @@
{
"env": {
"development": {
"presets": ["next/babel"]
},
"production": {
"presets": ["next/babel"]
},
"test": {
"presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]]
}
}
"presets": ["next/babel"]
}
10 changes: 1 addition & 9 deletions examples/custom-server-typescript/server/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,7 @@ const handle = app.getRequestHandler()
app.prepare().then(() => {
createServer((req, res) => {
const parsedUrl = parse(req.url!, true)
const { pathname, query } = parsedUrl

if (pathname === '/a') {
app.render(req, res, '/a', query)
} else if (pathname === '/b') {
app.render(req, res, '/b', query)
} else {
handle(req, res, parsedUrl)
}
handle(req, res, parsedUrl)
}).listen(port)

// tslint:disable-next-line:no-console
Expand Down
34 changes: 0 additions & 34 deletions examples/custom-server/.gitignore

This file was deleted.

16 changes: 1 addition & 15 deletions examples/custom-server/README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1 @@
# Custom server example

Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://github.com/vercel/next.js#custom-server-and-routing) so you can customize as much as you want.

The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.

## How to use

Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:

```bash
npx create-next-app --example custom-server custom-server-app
# or
yarn create next-app --example custom-server custom-server-app
```
This example has been moved to the documentation: [https://nextjs.org/docs/advanced-features/custom-server](https://nextjs.org/docs/advanced-features/custom-server)
16 changes: 0 additions & 16 deletions examples/custom-server/package.json

This file was deleted.

3 changes: 0 additions & 3 deletions examples/custom-server/pages/a.js

This file was deleted.

3 changes: 0 additions & 3 deletions examples/custom-server/pages/b.js

This file was deleted.

18 changes: 0 additions & 18 deletions examples/custom-server/pages/index.js

This file was deleted.

25 changes: 0 additions & 25 deletions examples/custom-server/server.js

This file was deleted.