Mobile Menu

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.

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.

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 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 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 Shrivastava

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

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

Samarpit Shrivastava

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

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

Working on a larger project that requires a Headless CMS?

Book a demo

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.js 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