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()vsgetStaticPaths()? 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.
Next.js on the Jamstack Resources
Videos and links referenced in Salma’s talk:
- Previewing your posts — how to build the best decoupled content management workflow for your static site
- Starter Repo: Deploy a Next.js App to Netlify in 1 Click
- Template: Customize a pre-designed blog built with Next.js
- Join the Jamstack Discord
- Video: Code faster with the Netlify CLI
- Video: Update to the latest Next.js on Netlify plugin
Get started with Next.js on Netlify today
Ready to see exactly how powerful Next.js on Netlify can be? Deploy a starter template and try it for yourself today.
