Skip to content

Commit 5d93753

Browse files
authored
API Routes Request Helpers docs. (vercel#39407)
Renames Middleware to Request Helpers to be both more accurate and also less confusing since Middleware is a separate feature of Next.js now.
1 parent 71f5f25 commit 5d93753

File tree

5 files changed

+22
-67
lines changed

5 files changed

+22
-67
lines changed

docs/api-routes/introduction.md

+5-6
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ description: Next.js supports API Routes, which allow you to build your API with
88
<summary><b>Examples</b></summary>
99
<ul>
1010
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/api-routes">Basic API Routes</a></li>
11-
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/api-routes-middleware">API Routes with middleware</a></li>
1211
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/api-routes-graphql">API Routes with GraphQL</a></li>
1312
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/api-routes-rest">API Routes with REST</a></li>
1413
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors">API Routes with CORS</a></li>
@@ -31,7 +30,7 @@ export default function handler(req, res) {
3130
3231
For an API route to work, you need to export a function as default (a.k.a **request handler**), which then receives the following parameters:
3332

34-
- `req`: An instance of [http.IncomingMessage](https://nodejs.org/api/http.html#class-httpincomingmessage), plus some [pre-built middlewares](/docs/api-routes/api-middlewares.md)
33+
- `req`: An instance of [http.IncomingMessage](https://nodejs.org/api/http.html#class-httpincomingmessage), plus some [pre-built middlewares](/docs/api-routes/request-helpers.md)
3534
- `res`: An instance of [http.ServerResponse](https://nodejs.org/api/http.html#class-httpserverresponse), plus some [helper functions](/docs/api-routes/response-helpers.md)
3635

3736
To handle different HTTP methods in an API route, you can use `req.method` in your request handler, like so:
@@ -57,17 +56,17 @@ For new projects, you can build your entire API with API Routes. If you have an
5756

5857
## Caveats
5958

60-
- API Routes [do not specify CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), meaning they are **same-origin only** by default. You can customize such behavior by wrapping the request handler with the [CORS middleware](/docs/api-routes/api-middlewares.md#connectexpress-middleware-support).
59+
- API Routes [do not specify CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), meaning they are **same-origin only** by default. You can customize such behavior by wrapping the request handler with the [CORS request helpers](https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors).
6160
- API Routes can't be used with [`next export`](/docs/advanced-features/static-html-export.md)
6261

6362
## Related
6463

6564
For more information on what to do next, we recommend the following sections:
6665

6766
<div class="card">
68-
<a href="/docs/api-routes/api-middlewares.md">
69-
<b>API Middlewares:</b>
70-
<small>learn about the built-in middlewares for the request.</small>
67+
<a href="/docs/api-routes/request-helpers.md">
68+
<b>API Routes Request Helpers:</b>
69+
<small>learn about the built-in helpers for the request.</small>
7170
</a>
7271
</div>
7372

docs/api-routes/api-middlewares.md renamed to docs/api-routes/request-helpers.md

+7-58
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
---
2-
description: API Routes provide built-in middlewares that parse the incoming request. Learn more about them here.
2+
description: API Routes provide built-in request helpers that parse the incoming request. Learn more about them here.
33
---
44

5-
# API Middlewares
5+
# API Routes Request Helpers
66

77
<details open>
88
<summary><b>Examples</b></summary>
99
<ul>
10-
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/api-routes-middleware">API Routes with middleware</a></li>
10+
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/api-routes-middleware">API Routes Request Helpers</a></li>
1111
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors">API Routes with CORS</a></li>
1212
</ul>
1313
</details>
1414

15-
API routes provide built in middlewares which parse the incoming request (`req`). Those middlewares are:
15+
API Routes provide built-in request helpers which parse the incoming request (`req`):
1616

1717
- `req.cookies` - An object containing the cookies sent by the request. Defaults to `{}`
1818
- `req.query` - An object containing the [query string](https://en.wikipedia.org/wiki/Query_string). Defaults to `{}`
1919
- `req.body` - An object containing the body parsed by `content-type`, or `null` if no body was sent
2020

2121
## Custom config
2222

23-
Every API route can export a `config` object to change the default configs, which are the following:
23+
Every API Route can export a `config` object to change the default configuration, which is the following:
2424

2525
```js
2626
export const config = {
@@ -32,7 +32,7 @@ export const config = {
3232
}
3333
```
3434

35-
The `api` object includes all configs available for API routes.
35+
The `api` object includes all config options available for API Routes.
3636

3737
`bodyParser` is automatically enabled. If you want to consume the body as a `Stream` or with [`raw-body`](https://www.npmjs.com/package/raw-body), you can set this to `false`.
3838

@@ -68,7 +68,7 @@ export const config = {
6868
}
6969
```
7070

71-
`responseLimit` is automatically enabled, warning when an API routes' response body is over 4MB.
71+
`responseLimit` is automatically enabled, warning when an API Routes' response body is over 4MB.
7272

7373
If you are not using Next.js in a serverless environment, and understand the performance implications of not using a CDN or dedicated media host, you can set this limit to `false`.
7474

@@ -91,57 +91,6 @@ export const config = {
9191
}
9292
```
9393

94-
## Connect/Express middleware support
95-
96-
You can also use [Connect](https://github.com/senchalabs/connect) compatible middleware.
97-
98-
For example, [configuring CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) for your API endpoint can be done leveraging the [cors](https://www.npmjs.com/package/cors) package.
99-
100-
First, install `cors`:
101-
102-
```bash
103-
npm i cors
104-
# or
105-
yarn add cors
106-
```
107-
108-
Now, let's add `cors` to the API route:
109-
110-
```js
111-
import Cors from 'cors'
112-
113-
// Initializing the cors middleware
114-
const cors = Cors({
115-
methods: ['GET', 'HEAD'],
116-
})
117-
118-
// Helper method to wait for a middleware to execute before continuing
119-
// And to throw an error when an error happens in a middleware
120-
function runMiddleware(req, res, fn) {
121-
return new Promise((resolve, reject) => {
122-
fn(req, res, (result) => {
123-
if (result instanceof Error) {
124-
return reject(result)
125-
}
126-
127-
return resolve(result)
128-
})
129-
})
130-
}
131-
132-
async function handler(req, res) {
133-
// Run the middleware
134-
await runMiddleware(req, res, cors)
135-
136-
// Rest of the API logic
137-
res.json({ message: 'Hello Everyone!' })
138-
}
139-
140-
export default handler
141-
```
142-
143-
> Go to the [API Routes with CORS](https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors) example to see the finished app.
144-
14594
## Extending the `req`/`res` objects with TypeScript
14695

14796
For better type-safety, it is not recommended to extend the `req` and `res` objects. Instead, use functions to work with them:

docs/api-routes/response-helpers.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
description: API Routes include a set of Express.js-like methods for the response to help you creating new API endpoints. Learn how it works here.
33
---
44

5-
# Response Helpers
5+
# API Routes Response Helpers
66

77
The [Server Response object](https://nodejs.org/api/http.html#http_class_http_serverresponse), (often abbreviated as `res`) includes a set of Express.js-like helper methods to improve the developer experience and increase the speed of creating new API endpoints.
88

docs/manifest.json

+8-1
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,13 @@
127127
{
128128
"title": "API Routes",
129129
"routes": [
130+
{
131+
"path": "/docs/api-routes/api-middlewares",
132+
"redirect": {
133+
"destination": "/docs/api-routes/request-helpers",
134+
"permanent": true
135+
}
136+
},
130137
{
131138
"title": "Introduction",
132139
"path": "/docs/api-routes/introduction.md"
@@ -137,7 +144,7 @@
137144
},
138145
{
139146
"title": "API Middlewares",
140-
"path": "/docs/api-routes/api-middlewares.md"
147+
"path": "/docs/api-routes/request-helpers.md"
141148
},
142149
{
143150
"title": "Response Helpers",

errors/invalid-page-config.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -115,5 +115,5 @@ export const config = {}
115115
### Useful Links
116116

117117
- [Enabling AMP Support](https://nextjs.org/docs/advanced-features/amp-support/introduction)
118-
- [API Middlewares](https://nextjs.org/docs/api-routes/api-middlewares)
118+
- [API Routes Request Helpers](https://nextjs.org/docs/api-routes/request-helpers)
119119
- [Switchable Runtime](https://nextjs.org/docs/advanced-features/react-18/switchable-runtime)

0 commit comments

Comments
 (0)