DEV Community

Cover image for Stackbit meets Next.js
Eduardo Bouças
Eduardo Bouças

Posted on

Stackbit meets Next.js

Since we launched our Site Builder, developers have used it to create tens of thousands of Jamstack sites with just a few clicks. We like to think of each of those sites as having its own flair and personality, which is made possible by the 336 permutations of themes, static site generators and CMS we currently offer.

Today, we’re beyond excited to add a big name to that lineup Next.js.

What is Next.js?

Next.js is a production-ready web framework based on the React JavaScript library, used by the likes of Uber, PlayStation and Netflix. But unlike other React-based tools in the space, Next.js has an interesting history, since it wasn’t always a static site generator.

You see, when developers pick React for their next project, they usually have to decide whether to render the app on a server and serve fully-formed HTML to the client, or ditch the server and render the app entirely in the browser.

What’s great about Next.js is that you don’t have to choose, because it can do both. Next.js started as an engine for server-rendered (or isomorphic) React applications, but recent versions introduced a set of features around static site generation, making it an incredibly powerful addition to the Jamstack toolbox.

On top of that, its zero-config approach means that you get a lot out of the box, without compromising on the flexibility and extensibility that are essential as your project grows.

Getting started

At Stackbit, we’ve been excited to see Next.js becoming an increasingly powerful solution for creating Jamstack sites, and we wrote some guides on how to get started with this setup and on pulling data into Next.js from different sources. From now on, Stackbit will handle all of that for you, allowing you to create a Jamstack site using Next.js in less than 60 seconds. As Cassidy Williams would say, here’s how:

  1. Head to https://jamstack.new/nextjs
  2. Use the theme we’ve picked for you or click Change to explore other options
  3. Pick the CMS of your choice; we select Git as the default, which stores data in your repository, but you can choose to use a headless CMS like Contentful or Sanity
  4. Click the big blue button at the bottom to connect your GitHub account
  5. It’s done! 🎉

Wait, there’s more

Streamlining the process of creating the site and doing all the data plumbing for you is great, but what if we throw a few more goodies into the mix?

Earlier this month, we announced the Stackbit Studio, the live editing experience at the heart of our Jamstack platform. When you create a Next.js site using Stackbit, you get access to live previews, inline editing, asset management, collaborators, granular publishing controls, integrated build logs and more. For free. (For real.)

Open-source at heart

We’re big believers in the power of open-source softweare and in giving back to the community. Every Next.js site that you create with Stackbit will be given to you in a GitHub repository, owned by you, with no proprietary technology.

All the data plumbing, and regardless of your choice of headless CMS, will be handled with Sourcebit, an MIT-licensed open-source library that we built with and for the Jamstack community.

Go build

We’re excited about Next.js and its role in the Jamstack ecosystem. We’re also chuffed to bits about our product and the potential it unlocks. Above all, we’re looking forward to seeing the amazing things you’re going to build when you combine the two.

We’ll be on the lookout on @stackbithq, and me personally on @eduardoboucas.

Top comments (0)