Guides & Tutorials
Next.js 101: What you should know
Chances are if you pay attention to the web development space, you might have been hearing quite a bit about Next.js.
Why the hype? What’s so exciting about it? Nobody knows. Just kidding. I know. And I’ll tell you.
Why does Next.js exist? Isn’t it just bloat on top of React?
Anyone who knows me knows I love React, and I stick to vanilla React as often as I can. But! There are a couple problems that Next.js solves:
- You might have trouble with Search Engine Optimization (SEO) since search engines have to run and index your application to get any information.
There are two ways to solve these problems, with Server Side Rendering (SSR), or with a statically generated site. Next.js can do both!
What features should I know about?
Next.js is pretty dang packed with a lot of nice features that will make your applications sparkle.
Development experience nice-to-haves
pages/ directory, it is automatically a route, no configuration needed (so a
contact.js will become
example.com/contact). Along with this, you can include dynamic routes (as in, ones with variable names, check out an example here), and do shallow routing (meaning you can change the URL without calling data fetching methods again).
Along with regular pages, you can set up API routing as well! With the
pages/api/ directory, any file you put in there will be treated as an API endpoint.
There are a few components and hooks that Next.js provides for devs to work with.
next/link: Enables client-side transitions between routes
next/head: Allows developers to append elements to the
<head>of the rendered page
next/router: A hook for accessing the
routerobject inside components on your application
next/amp: Allows you to create AMP pages. I bet you're AMPed up about that.
There is a built-in performance relayer that allows you to analyze and measure your page performance. It allows you to track your own custom metrics, as well as Web Vitals.
The Next.js command line interface is nice and simple to use. It allows you to:
- Create optimized production builds (
- Run the application in development mode (
- Run the application in production mode after building (
- Export your Next.js app as a static site (
If you want to customize more advanced behavior in your application, you can create a
next.config.js file (which is really a regular Node.js module). That config file allows you to customize all sorts of things, like adding support for custom page extensions, indicating static optimization benefits, and setting up custom build directories.
Why would I use Next.js instead of something like Gatsby?
There is an excellent CodePen here by Rachel Smith that answers that for you:
But for real though, it really does depend on what you want. The developer experience for Next.js is solid, and it also is for Gatsby (and it also is for several other frameworks out there). If you want a static site, you can use any of these frameworks easily. If you want something more server-render-y, Next.js has a lot of support for that (but you might need to use next-on-netlify for that; I illustrate how in this blog post), which might be a game-changer for you.
I love it already! How do I get started?
Luckily, there’s already a ton of resources and examples out there in the world. If you’d like to get started using Next.js on Netlify, here’s a set of blog posts that might be useful for you:
- Building a Markdown blog with Next 9.4 and Netlify
- 2 Ways to Create Server-Rendered Routes Using Next.js and Netlify
- Add a Netlify-powered contact form to your Next.js site
- Improve your SEO and Social Sharing Cards with Next.js
Or, if you would rather not read and just dive into code, click the button below to deploy a Next.js site to Netlify right away and get a repository going on your chosen Git platform.