🌟 Help others discover us, star our GitHub repo! 🌟

Integrate Next.js with Webiny Headless CMS

Building a website or app with Next.js and Webiny will allow your isomorphic applications to scale as much as needed.

Why Next.js?

Next.js is a React framework that lets you build hybrid static and server rendered applications with smart bundling, route pre-fetching, and TypeScript support built-in.

Next.js has all the tools you need to make the Web. Faster.

Stylized Next.js logo

Why Webiny?

Webiny Headless CMS contains everything an enterprise needs to build, manage and deliver content at scale.

Webiny doesn't just manage your content, it also allows you to manage all of your projects centrally using built-in internationalization and multi-site features, and use advanced processes that support organization-wide collaboration.

Stylized Webiny logo

Next.js + Webiny integration

You can easily build a dynamic, content-heavy site with Next.js and use Webiny to decouple engineering needs from your marketing team using a highly-scalable, fault-tolerant Serverless service that scales in and out in seconds. Use a single Webiny instance to manage content for an unlimited number of websites. All under one tenant in your own security perimeter.

Next.js Benefits

  • Automatic image optimization with instant builds.
  • Pre-render pages at build time or request time.
  • File system routing
  • Create API endpoints to provide backend functionality.
  • Dynamic routing defined by code instead of configuration.

Webiny Headless CMS Benefits

  • Keep your data in your cloud, under your own security perimeter
  • Unlock greater performance by storing and delivering content closer to your users
  • Webiny runs on highly-scalable fault-tolerant serverless services that scale in and out in seconds
  • Marketing teams have full control to create and manage content, landing pages, files, and forms across multiple web properties
  • Webiny is open source, released under an MIT license, and architected for extensibility

Building a Frontend With Next.js

Learn how to build a frontend for Webiny Headless CMS with Next.JS starter.

Step 1

Install and Deploy Webiny

Skip this step if you already have Webiny installed and deployed. Be sure to check out the prerequisites for installing Webiny on your local machine.

Then, create a new Webiny project by running the following command. If you get stuck or for more details, please see our documentation.

npx create-webiny-project my-webiny-project
Copy
Step 2

Create a new Next.js site

Click on the button to deploy the project to Vercel. Or follow the link to full instructions if you want to start locally.

Full instructions →

One click Vercel install button

Check out these tutorials on using
Webiny + Next.js on our blog

Caleb OlojoCaleb Olojo
Build a Blog with Next.js and Webiny Headless CMS

Next.js is a popular tool for building isomorphic React apps. Here's how to build a blog with Next.js and Webiny.

Fredrick EmmanuelFredrick Emmanuel
Build a Chat app with NextJS, Socket.io and Webiny

How to build a real-time chat application using Webiny, using Socket.io and Next.JS.

Samarpit ShrivastavaSamarpit Shrivastava
Build a Trello Clone with Next.js and Webiny Headless CMS - 1 of 2

In this tutorial, we'll be building an Trello clone with Next.js and Webiny Headless CMS.

Samarpit ShrivastavaSamarpit Shrivastava
Build a Trello Clone with Next.js and Webiny Headless CMS - 2 of 2

In this tutorial, we'll be building an Trello clone with Next.js and Webiny Headless CMS.

Other Integrations

Webiny also supports other frontend technologies.

Gatsby logo

Gatsby

Gatsby integrates different content, APIs and services seamlessly into one experience.

Discover more →
React logo

React

A declarative, component-based JavaScript library for building user interfaces.

Discover more →
Vue logo

Vue.js

Vue.js is an approachable, performant and versatile framework for building web user interfaces.

Discover more →
Flutter logo

Flutter

Build apps for any screen with Flutter. Compiles to mobile, web, desktop and JavaScript runtimes.

Discover more →
By using this website you agree to our privacy policy
Webiny Chat

Find us on Slack

Webiny Community Slack