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:
- The initial page load can be slow for the user, because all JavaScript has to load first before anything is on the page.
- 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
Out of the box, Next.js has great things like hot code reloading and a variety of styling options (styled-jsx, CSS Modules, Sass, and moooore), TypeScript support, built-in support for environment variables, and automatic code splitting (meaning pages only load the JavaScript they need, and no more). My favorite part about having these features is that you don’t have to do anything to set them up, they just work!
Routing
As for pages in your application, the entire routing structure is filesystem-based! Whenever you put a JavaScript file in the 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.
The API
There are a few components and hooks that Next.js provides for devs to work with.
next/link: Enables client-side transitions between routesnext/head: Allows developers to append elements to the<head>of the rendered pagenext/router: A hook for accessing therouterobject inside components on your applicationnext/amp: Allows you to create AMP pages. I bet you’re AMPed up about that.
Performance measurement
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 CLI
The Next.js command line interface is nice and simple to use. It allows you to:
- Create optimized production builds (
next build) - Run the application in development mode (
next dev) - Run the application in production mode after building (
next start) - Export your Next.js app as a static site (
next export)
Custom configuration
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:
See the Pen It depends by Rachel Smith (@rachsmith) on CodePen.
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.
