Routing with Next.JS

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.