Guides & Tutorials

Next.js on Netlify: a Powerful Combination

Guides & Tutorials

Next.js on Netlify: a Powerful Combination

Next.js is already an incredibly powerful framework. That’s one of the reasons we’re seeing it used more and more in production: it offers developers endless possibilities to build hybrid React applications with different rendering modes. But while Next.js offers a powerful toolbox, it can’t make the decisions for you. Developers have important choices to make, and ask a lot of questions like:

When should I use getStaticProps() vs getStaticPaths()? in Next.js?
What options do I have for hosting my Next.js application?
How do I get the best developer experience using Next.js?

Those questions require knowledge of the broader Jamstack ecosystem, and an understanding of which tools and processes make most sense for your development workflow.

In a recent webinar, Salma Alam-Naylor walked through some of the common questions about making the most of Next.js. You can watch the full conversation “Next.js on Netlify: a Powerful Combination” below, or read on for some key takeaways about what makes Netlify a great place to run Next.js apps.

Developer Experience Goodies that make Next.js more powerful on Netlify

Netlify’s platform includes a number of key features that make for a great developer experience. To keep it a bit simpler, we’ll break these into two groups:

Tools for developing applications
Tools for advanced release management workflows

Tools for developing applications

Netlify CLI

Beyond what’s possible with the Next.js CLI, you can use the Netlify CLI to live stream your development environment, manage environment variables, debug serverless functions, and more. The CLI is also a great tool for onboarding your team. Learn how to get started, or watch the quick tutorial video:

Netlify Forms

As soon as you need to put a form on a site, you need some kind of backend and that feels like a stumbling block. With Netlify Forms, all you have to do is create an HTML form on the frontend and add the Netlify attribute. Bam! Netlify will recognize the tag and automatically pull your Netlify form submissions into Netlify.

Learn how to use Netlify Forms with Next.js.

Netlify Identity

Need a backend for authentication? Not with Netlify identity. We do all that for you. Add a full suite of authentication functionality without needing a managed backend. This is perfect for app administration or gated content.

Netlify Analytics

Google Lighthouse scores penalize you for including JavaScript-heavy analytics tags in the head of your site pages. Netlify analytics are privacy-first and JavaScript-free. Measure pageviews, visitors, locations of visitors, top pages, and referral sources.

Netlify Graph

Get integrations from ideas to production faster. Connect to third-party APIs, manage authentication tokens, and explore available endpoints.

Learn more about Netlify Graph

Tools for advanced release management workflows

Customize your build with plugins

Netlify’s build plugins allow you to customize your release management process to automate tasks or check that your changes meet specific requirements. For example, you can:

Measure the frequency of your builds with the New Relic plugin
Check your Lighthouse scores after each deploy
Use Checklinks to prevent link rot
Optimize your images using Cloudinary, or
Build your own build plugin for something special to your team’s workflow

Prioritize builds in the queue

Prioritize any build to be next in line when build capacity opens up. For example, you can skip urgent content changes to the top of the list and let more routine changes wait their turn.

Collaborate with Deploy Previews

Share your deploy preview URL with stakeholders or reviewers for QA. Use a QR code to open the page on your mobile device for testing smaller viewports. Quickly take screenshots and leave comments that sync directly to GitHub where you can take action on feedback.

Lock publishing to a single deploy

Manage big bang releases or code freezes with locked deploys which pin your site to the latest published deploy. This allows builds to happen but keeps them on hold until you’re ready to release them to production. When you’re ready, you can launch all of your changes together with the click of a button.

Roll back, instantly

Accidentally shipped something too soon? Introduced a bug? No problem. Thanks to immutable deploys, you can roll back to any prior version instantly. Think of rollbacks as an “undo” button for your site or app.