Update docs and Create Next App to use API Middlewares by default.

docs/api-routes/introduction.md

@@ -19,13 +19,11 @@ API routes provide a straightforward solution to build your **API** with Next.js
 
 Any file inside the folder `pages/api` is mapped to `/api/*` and will be treated as an API endpoint instead of a `page`. They are server-side only bundles and won't increase your client-side bundle size.
 
-For example, the following API route `pages/api/user.js` handles a `json` response:
+For example, the following API route `pages/api/user.js` returns a `json` response with a status code of `200`:
 
 ```js
 export default function handler(req, res) {
-  res.statusCode = 200
-  res.setHeader('Content-Type', 'application/json')
-  res.end(JSON.stringify({ name: 'John Doe' }))
+  res.status(200).json({ name: 'John Doe' }))
 }
 ```
 

examples/progressive-web-app/pages/api/hello.js

@@ -1,8 +1,7 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 const hello = (req, res) => {
-  res.statusCode = 200
-  res.json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' })
 }
 
 export default hello

examples/with-gsap/pages/api/hello.js

@@ -1,6 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default function handler(req, res) {
-  res.statusCode = 200
-  res.json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' })
 }

examples/with-mux-video/pages/api/asset/[id].js

@@ -17,9 +17,8 @@ export default async function assetHandler(req, res) {
           },
         })
       } catch (e) {
-        res.statusCode = 500
         console.error('Request error', e)
-        res.json({ error: 'Error getting upload/asset' })
+        res.status(500).json({ error: 'Error getting upload/asset' })
       }
       break
     default:

examples/with-mux-video/pages/api/upload.js

@@ -16,9 +16,8 @@ export default async function uploadHandler(req, res) {
           url: upload.url,
         })
       } catch (e) {
-        res.statusCode = 500
         console.error('Request error', e)
-        res.json({ error: 'Error creating upload' })
+        res.status(500).json({ error: 'Error creating upload' })
       }
       break
     default:

examples/with-mux-video/pages/api/upload/[id].js

@@ -16,9 +16,8 @@ export default async function uploadHandler(req, res) {
           },
         })
       } catch (e) {
-        res.statusCode = 500
         console.error('Request error', e)
-        res.json({ error: 'Error getting upload/asset' })
+        res.status(500).json({ error: 'Error getting upload/asset' })
       }
       break
     default:

examples/with-sentry/pages/api/test1.js

@@ -6,6 +6,5 @@ const doAsyncWork = () => Promise.reject(new Error('API Test 1'))
 doAsyncWork()
 
 export default async function handler(req, res) {
-  res.statusCode = 200
-  res.json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' })
 }

examples/with-sentry/pages/api/test2.js

@@ -9,6 +9,5 @@ function work() {
 work()
 
 export default async function handler(req, res) {
-  res.statusCode = 200
-  res.json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' })
 }

examples/with-sentry/pages/api/test3.js

@@ -9,6 +9,5 @@ function work() {
 export default async function handler(req, res) {
   work()
 
-  res.statusCode = 200
-  res.json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' })
 }

examples/with-sentry/pages/api/test4.js

@@ -14,6 +14,5 @@ export default async function handler(req, res) {
   // Flushing before returning is necessary if deploying to Vercel, see
   // https://vercel.com/docs/platform/limits#streaming-responses
   await Sentry.flush(2000)
-  res.statusCode = 200
-  res.json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' })
 }

examples/with-tailwindcss/pages/api/hello.js

@@ -1,6 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default function helloAPI(req, res) {
-  res.statusCode = 200
-  res.json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' })
 }

examples/with-typescript-eslint-jest/pages/api/hello.ts

@@ -3,8 +3,7 @@
 import { NextApiRequest, NextApiResponse } from 'next'
 
 const handler = (req: NextApiRequest, res: NextApiResponse) => {
-  res.statusCode = 200
-  res.json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' })
 }
 
 export default handler

examples/with-unsplash/pages/api/collection/[id].tsx

@@ -16,15 +16,12 @@ export default function getCollection(
       .getCollection(parseInt(id.toString()))
       .then(toJson)
       .then((json) => {
-        res.statusCode = 200
-        res.setHeader('Content-Type', 'application/json')
         res.setHeader('Cache-Control', 'max-age=180000')
-        res.end(JSON.stringify([json]))
+        res.status(200).json([json])
         resolve()
       })
       .catch((error) => {
-        res.json(error)
-        res.status(405).end()
+        res.status(405).json(error)
         resolve()
       })
   })

examples/with-unsplash/pages/api/collection/index.tsx

@@ -15,15 +15,12 @@ export default function getCollections(
       .then((json) => {
         json.map((c) => (c.slug = slug(c.title)))
 
-        res.statusCode = 200
-        res.setHeader('Content-Type', 'application/json')
         res.setHeader('Cache-Control', 'max-age=180000')
-        res.end(JSON.stringify(json))
+        res.status(200).json(json)
         resolve()
       })
       .catch((error) => {
-        res.json(error)
-        res.status(405).end()
+        res.status(405).json(error)
         resolve()
       })
   })

examples/with-unsplash/pages/api/photo/[id].tsx

@@ -16,15 +16,12 @@ export default function getCollectionPhotos(
       .getCollectionPhotos(parseInt(id.toString()))
       .then(toJson)
       .then((json) => {
-        res.statusCode = 200
-        res.setHeader('Content-Type', 'application/json')
         res.setHeader('Cache-Control', 'max-age=180000')
-        res.end(JSON.stringify(json))
+        res.status(200).json(json)
         resolve()
       })
       .catch((error) => {
-        res.json(error)
-        res.status(405).end()
+        res.status(405).json(error)
         resolve()
       })
   })

examples/with-unsplash/pages/api/photo/index.tsx

@@ -9,15 +9,12 @@ export default function getPhotos(req: NextApiRequest, res: NextApiResponse) {
       .photos(process.env.UNSPLASH_USER, 1, 50, 'latest')
       .then(toJson)
       .then((json: string) => {
-        res.statusCode = 200
-        res.setHeader('Content-Type', 'application/json')
         res.setHeader('Cache-Control', 'max-age=180000')
-        res.end(JSON.stringify(json))
+        res.status(200).json(json)
         resolve()
       })
       .catch((error) => {
-        res.json(error)
-        res.status(405).end()
+        res.status(405).json(error)
         resolve()
       })
   })

examples/with-unsplash/pages/api/stats/index.tsx

@@ -9,15 +9,12 @@ export default function getStats(req: NextApiRequest, res: NextApiResponse) {
       .statistics(process.env.UNSPLASH_USER, 'days', 30)
       .then(toJson)
       .then((json) => {
-        res.statusCode = 200
-        res.setHeader('Content-Type', 'application/json')
         res.setHeader('Cache-Control', 'max-age=180000')
-        res.end(JSON.stringify(json))
+        res.status(200).json(json)
         resolve()
       })
       .catch((error) => {
-        res.json(error)
-        res.status(405).end()
+        res.status(405).json(error)
         resolve()
       })
   })

examples/with-unsplash/pages/api/user/index.tsx

@@ -9,15 +9,12 @@ export default function getUser(req: NextApiRequest, res: NextApiResponse) {
       .profile(process.env.UNSPLASH_USER)
       .then(toJson)
       .then((json) => {
-        res.statusCode = 200
-        res.setHeader('Content-Type', 'application/json')
         res.setHeader('Cache-Control', 'max-age=180000')
-        res.end(JSON.stringify(json))
+        res.status(200).json([json])
         resolve()
       })
       .catch((error) => {
-        res.json(error)
-        res.status(405).end()
+        res.status(405).json(error)
         resolve()
       })
   })

packages/create-next-app/templates/default/pages/api/hello.js

@@ -1,6 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default (req, res) => {
-  res.statusCode = 200
-  res.json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' })
 }