Routing with Next.JS
Tags: nextjs
Published: 2021-02-05 03:30:27

---
title: Routing with Next.JS
published: true
description: Creating dynamic routes using Next.JS
tags: next
cover_image: https://images.pexels.com/photos/258173/pexels-photo-258173.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260
---

Hello! Today I will be going over the options we have for implementing routing when using Next.JS. Hopefully if you're reading this you have an understanding about how to implement routing with React.JS, since Next.JS is, after all, a React framework. Next.JS has a very straightforward approach for creating static routes as well as for dynamic routing. This is all handled by our page files in our Next app that get stored in a `Pages` directory. However, as a web application grows in complexity, it becomes less ideal to define routes this way. You may be writing a blog that you need to provide a way to display a single post in a growing collection of posts. Next.js lets us add a way to pull up any of these posts by matching a `[param]` that we include in the file path (eg. `blog/[slug]`, `posts/[pid]` `comments/[id]`). Using Next.JS's `Link` component we can match our params in the server to render them on the client side.

```
//pages/blog/[id].js

const Blog = () => {
   const router = useRouter();
   const { id } = router.query;

   return (
   <div className="blog">
     <Link href="/blog/[id] as={`/blog/${id}/my-page`}>
       Blog: { id }
     </Link>
   </div>
  );
}

//home.js
import Link from 'next/link'

const Home = () => (
<>
<Link href="blog/jeff">To blog/[id]</Link>
/* We can include multiple parameters in our queries as well eg. {"id": "jeff", "foo": "bar"} */
<Link href="blog/jeff?foo=bar">Also to blog/[id]</Link>
</>
)
export default Home
```
This example uses the `{ id }` parameter to match every file in the `blog` directory that includes an { id } parameter as a query object. That can be `blog/a.js`, `blog/b.js`, etc. We can also expand how far down the file tree we want our dynamic routes to reach, using a spread operator. For example, a file `blog/[id]/[...comments].js` can catch all dynamic routes under the [id] param, like `blog/abc/jeff`, `blog/abc/jeff/replies`, blog/abc/justin/replies/comments`, etc. 

As you can see, Next.js provides some very straightforward options when it comes to routing. It even provides a simple way to define API endpoints that don't increase the size of the client side bundle. All we do is export a request handler function as a default function. The Next.js documentation provides this excellent example of an API route:

```
//Here, req is an instance of http.IncomingMessage, and res is an instance of http.ServerResponse
const handler = (req, res) => {
  res.cookie('Next.js', 'api-middleware!')
  res.end(res.getHeader('Set-Cookie'))
}
export default cookies(handler)

```
In the example above, we also see some of the middlewares provided by Next.js for parsing `req`: `req.cookies`, `req.query`, and `req.body`. The first middleware, `req.cookies`, is an object that contains the request's cookies. If there is no cookie in the request, `req.cookies` defaults to an empty object `{}`. Next we have `req.query`, which is an object that will contain a string query, or will default to `{}` if there isn't one. And lastly, there's `req.body`, which is an object that contains the body parsed by `content-type`. The handler above makes use of the `req.cookies` method to retrieve the cookie and add it to the `Set-Cookie` header. Afterwards we can use built-in response methods that work similarly to Express.js, ie. 
`res.status`, `res.json`, etc.


Thanks for reading! Until next time!

WORKS CITED
Susiripala, Arunoda, et al. “API Routes.” Next.js, Vercel, 2021, nextjs.org/docs/api-routes/introduction.