Added more examples to Response Helpers page (vercel#29462)

## Bug

- [x] Related issues linked using Fixes: https://github.com/vercel/front/issues/11154
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes

docs/api-routes/response-helpers.md

@@ -4,27 +4,99 @@ description: API Routes include a set of Express.js-like methods for the respons
 
 # Response Helpers
 
-<details open>
-  <summary><b>Examples</b></summary>
-  <ul>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/api-routes">Basic API Routes</a></li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/api-routes-rest">API Routes with REST</a></li>
-  </ul>
-</details>
+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.
 
-The response (`res`) includes a set of Express.js-like methods to improve the developer experience and increase the speed of creating new API endpoints, take a look at the following example:
+The included helpers are:
+
+- `res.status(code)` - A function to set the status code. `code` must be a valid [HTTP status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes)
+- `res.json(body)` - Sends a JSON response. `body` must be a [serialiazable object](https://developer.mozilla.org/en-US/docs/Glossary/Serialization)
+- `res.send(body)` - Sends the HTTP response. `body` can be a `string`, an `object` or a `Buffer`
+- `res.redirect([status,] path)` - Redirects to a specified path or URL. `status` must be a valid [HTTP status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes). If not specified, `status` defaults to "307" "Temporary redirect".
+
+## Setting the status code of a response
+
+When sending a response back to the client, you can set the status code of the response.
+
+The following example sets the status code of the response to `200` (`OK`) and returns a `name` property with the value of `John Doe` as a JSON response:
 
 ```js
 export default function handler(req, res) {
-  res.status(200).json({ name: 'Next.js' })
+  res.status(200).json({ message: 'Hello from Next.js!' })
 }
 ```
 
-The included helpers are:
+## Sending a JSON response
 
-- `res.status(code)` - A function to set the status code. `code` must be a valid [HTTP status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes)
-- `res.json(body)` - Sends a JSON response. `body` must be a [serialiazable object](https://developer.mozilla.org/en-US/docs/Glossary/Serialization)
-- `res.send(body)` - Sends the HTTP response. `body` can be a `string`, an `object` or a `Buffer`
-- `res.redirect([status,] path)` - Redirects to a specified path or URL. `status` must be a valid [HTTP status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes). If not specified, `status` defaults to "307" "Temporary redirect".
+When sending a response back to the client you can send a JSON response, this must be a [serialiazable object](https://developer.mozilla.org/en-US/docs/Glossary/Serialization).
+In a real world application you might want to let the client know the status of the request depending on the result of the requested endpoint.
+
+The following example sends a JSON response with the status code `200` (`OK`) and the result of the async operation. It's contained in a try catch block to handle any errors that may occur, with the appropriate status code and error message caught and sent back to the client:
+
+```js
+export default async function handler(req, res) {
+  try {
+    const result = await someAsyncOperation()
+    res.status(200).json({ result })
+  } catch (err) {
+    res.status(500).json({ error: 'failed to load data' })
+  }
+}
+```
+
+## Sending a HTTP response
+
+Sending an HTTP response works the same way as when sending a JSON response. The only difference is that the response body can be a `string`, an `object` or a `Buffer`.
+
+The following example sends a HTTP response with the status code `200` (`OK`) and the result of the async operation.
+
+```js
+export default async function handler(req, res) {
+  try {
+    const result = await someAsyncOperation()
+    res.status(200).send({ result })
+  } catch (err) {
+    res.status(500).send({ error: 'failed to fetch data' })
+  }
+}
+```
+
+## Redirects to a specified path or URL
+
+Taking a form as an example, you may want to redirect your client to a specified path or URL once they have submitted the form.
+
+The following example redirects the client to the `/` path if the form is successfully submitted:
+
+```js
+export default async function handler(req, res) {
+  const { name, message } = req.body
+  try {
+    await handleFormInputAsync({ name, message })
+    res.redirect(307, '/')
+  } catch (err) {
+    res.status(500).send({ error: 'failed to fetch data' })
+  }
+}
+```
+
+## Adding TypeScript types
+
+You can make your response handlers more type-safe by importing the `NextApiRequest` and `NextApiResponse` types from `next`, in addition to those, you can also type your response data:
+
+```ts
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type ResponseData {
+  message: string
+}
+
+export default function handler(req: NextApiRequest, res: NextApiResponse<ResponseData>) => {
+  res.status(200).json({ message: 'Hello from Next.js!' })
+}
+```
+
+To view more examples using types, check out the [TypeScript documentation](/docs/basic-features/typescript.md#api-routes).
+
+If you prefer to view your examples within a real projects structure you can checkout our examples repository:
 
-To view an example using types, check out the [TypeScript documentation](/docs/basic-features/typescript.md#api-routes).
+- [Basic API Routes](https://github.com/vercel/next.js/tree/canary/examples/api-routes)
+- [API Routes with REST](https://github.com/vercel/next.js/tree/canary/examples/api-routes-rest)