Next.js CMS

The easiest way to manage content with Next.js

Next.js makes it trivial to build scalable and fast React apps with server-side SEO. When it comes to authoring content, pair it with a CMS that’s been built exactly for this use-case.

Proudly powered by DatoCMS + Next.js:
Argyle
https://argyle.com/
Flightcontrol
https://www.flightcontrol.dev/
Buildkite
https://buildkite.com/
Mercury
https://mercury.com/
Apollo GraphQL
https://www.apollographql.com/
Olifant Digital
https://ikius.com/work/olifant-digital
Choose Better - B Lab Europe
https://choosebetter.bcorporation.eu/
Ryder
https://www.ryder.id/
Theorie Toppers
https://www.theorietoppers.nl/
Category API
https://categoryapi.com
Alma
https://almapay.com
Storyworlds Builders (SWOB)
https://www.storyworldsbuilders.com/
McDonald's Video Platform
https://www.our-engagement.ch/
Kunsthaus Zürich Visitorguide
https://visitorguide.kunsthaus.ch/
Martin Smerdel
https://martinsmerdel.com
Pro League
https://www.proleague.be
Evia
https://www.evia-living.dk/
Headstart Dairy
https://ikius.com/work/headstart-dairy
Khemistry
https://khemistry.com.au/
The Sistergood
https://www.thesistergood.com/
L’Officiel
https://www.lofficiel.com/
Polimoda
https://www.polimoda.com/
Real Estate Jobs
https://realestatejobs.io
Great Southern
https://greatsouthernfarms.com.au/
Luganodante
https://luganodante.com
Little Caesars
https://littlecaesars.com/en-us/
HashiCorp
https://www.hashicorp.com/

Worldwide CDN

If Next.js is serverless, so your CMS should be

If your content is always fetched from a single geographical location, there’s no point in building a website with a serverless architecture, that is why DatoCMS and Next.js are so powerful together.

DatoCMS delivers your content from a CDN with edges all around the globe, minimizing latency and providing the fastest content delivery on the market.

Read more about our Worldwide CDN

ADL
Adelaide, Australia
Distance
AMS
Amsterdam, Europe
Distance
DCA
Ashburn (Metro), North America
Distance
IAD
Ashburn (Metro), North America
Distance
PDK
Atlanta (Metro), North America
Distance
AKL
Auckland, Australia
Distance
BKK
Bangkok, Asia
Distance
BOG
Bogota, South America
Distance
BOS
Boston, North America
Distance
BNE
Brisbane, Australia
Distance
BRU
Brussels, Europe
Distance
EZE
Buenos Aires, South America
Distance
YYC
Calgary, North America
Distance
CPT
Cape Town, Africa
Distance
MAA
Chennai, India
Distance
CHI
Chicago (Metro), North America
Distance
CHC
Christchurch, Australia
Distance
CMH
Columbus, North America
Distance
LCK
Columbus, North America
Distance
CPH
Copenhagen, Europe
Distance
CWB
Curitiba, South America
Distance
ADS
Dallas (Metro), North America
Distance
DFW
Dallas (Metro), North America
Distance
DEL
Delhi, India
Distance
DEN
Denver, North America
Distance
DTW
Detroit, North America
Distance
DXB
Dubai, Asia
Distance
DUB
Dublin, Europe
Distance
FOR
Fortaleza, South America
Distance
FRA
Frankfurt (Metro), Europe
Distance
WIE
Frankfurt, Europe
Distance
FJR
Fujairah Al Mahta, Asia
Distance
GNV
Gainesville, North America
Distance
ACC
Ghana, Africa
Distance
HEL
Helsinki, Europe
Distance
HKG
Hong Kong, Asia
Distance
HNL
Honolulu, North America
Distance
IAH
Houston, North America
Distance
HYD
Hyderabad, India
Distance
JNB
Johannesburg, Africa
Distance
MCI
Kansas City, North America
Distance
CCU
Kolkata, India
Distance
KUL
Kuala Lumpur, Asia
Distance
LIM
Lima, South America
Distance
LIS
Lisbon, Europe
Distance
LCY
London, Europe
Distance
LHR
London, Europe
Distance
LON
London, Europe
Distance
BUR
Los Angeles (Metro), North America
Distance
HHR
Los Angeles (Metro), North America
Distance
LAX
Los Angeles (Metro), North America
Distance
MAD
Madrid, Europe
Distance
MAN
Manchester, Europe
Distance
MNL
Manila, Asia
Distance
MRS
Marseille, Europe
Distance
MEL
Melbourne, Australia
Distance
MIA
Miami, North America
Distance
LIN
Milan, Europe
Distance
MXP
Milan, Europe
Distance
MSP
Minneapolis, North America
Distance
STP
Minneapolis, North America
Distance
YUL
Montreal, North America
Distance
BOM
Mumbai, India
Distance
MUC
Munich, Europe
Distance
LGA
New York City, North America
Distance
NYC
New York City (Metro), North America
Distance
EWR
Newark, North America
Distance
ITM
Osaka, Asia
Distance
OSL
Oslo, Europe
Distance
PMO
Palermo, Europe
Distance
PAO
Palo Alto (Metro), North America
Distance
CDG
Paris (Metro), Europe
Distance
PAR
Paris (Metro), Europe
Distance
PER
Perth, Australia
Distance
PHX
Phoenix, North America
Distance
PDX
Portland, North America
Distance
GIG
Rio de Janeiro, South America
Distance
FCO
Rome, Europe
Distance
SJC
San Jose, North America
Distance
WVI
San Jose, North America
Distance
SCL
Santiago, South America
Distance
GRU
Sao Paulo (Metro), South America
Distance
BFI
Seattle (Metro), North America
Distance
ICN
Seoul, South Korea
Distance
QPG
Singapore, Asia
Distance
SIN
Singapore, Asia
Distance
SOF
Sofia, Europe
Distance
STL
St.Louis, North America
Distance
BMA
Stockholm, Europe
Distance
SYD
Sydney, Australia
Distance
TYO
Tokyo, Asia
Distance
NRT
Tokyo (Metro), Asia
Distance
YYZ
Toronto, North America
Distance
YVR
Vancouver, North America
Distance
VIE
Vienna, Europe
Distance
WLG
Wellington, Australia
Distance

GraphQL Content API

Ask for what you need, get exactly that

Our Content Delivery API is built with GraphQL. That means powerful developer tools, multiple resources in a single request and complete control over the data your website downloads. The perfect solution for a Next.js CMS.

Read more about our GraphQL API
{}

Next.js images

State of the art for responsive and progressive images

Serving optimized images is incredibly hard, but using our GraphQL Content API and our React component, you can implement lazy loaded, responsive images in one line of code. Avoid any layout jumping, offer instant previews of images while they load. It’s like magic.

Read more about our React components!
Before
Next.js with DatoCMS

Next.js CMS example

Next.js preview mode + DatoCMS Preview API = Content editors happiness

Since Next.js 9.3 you can take advantage of Preview Mode: that means now you can go static (and hyper-fast) with visitors and dynamic with content editors, giving them instant previews for their edits.

That’s the best of both worlds, and pairs wonderfully with our GraphQL Preview endpoint.

pages/movie.js
1
import { request } from 'graphql-request'
2
const query = `{
3
movie(filter: { title: { eq: "Inception" } }) {
4
releaseDate
5
actors {
6
name
7
}
8
}
9
}`
10
export async function getStaticProps({ preview }) {
11
// If context.preview is true, append "/preview" to the API endpoint
12
// to request draft data instead of published data.
13
const endpoint = preview ?
14
'https://graphql.datocms.com/preview' :
15
'https://graphql.datocms.com/'
16
const { movie } = await request(endpoint, query);
17
return {
18
props: { movie };
19
}
20
}
21
export default MoviePage({ movie }) {
22
...
23
}
Acme Inc. - DatoCMS
Create new Blog post
Title
The Best Video Games to Play
Author
Dan Poe
Content
Text
Lorem ipsum....
Gallery
Text
Lorem ipsum....
CTA label
Try it now!
CTA URL
http://...
Quote
Lorem ipsum....
Author
Steve Jobs
Add a new block:
Text
Gallery
Quote
Call to action
Save Blog Post

A component-centric CMS, just like Next.js

Using components is one of the perks of using React and Next.js. That is why a CMS should think and behave just like that. Our component-based approach allows developers to clearly divide work amongst themselves and editors to immediately visualize a wireframe, ultimately providing a scalable and customizable experience.

Read more about DatoCMS modular blocks

We are so happy with DatoCMS. I'm representing Signifly - an agency currently running 20 projects, and will increase with +10 projects per year.”

Tore Heimann
Technical Lead at Signifly
Next.js + DatoCMS demo
pages/homepage.js - Visual Studio Code
Try our Project starter

Start your new Next.js project in minutes

Learn from our best-practice project. Fully configured and deployed on Vercel. Source included.

We power experiences for over half a billion users
Start using DatoCMS today
According to Gartner 89% of companies plan to compete primarily on the basis of customer experience this year. Don't get caught unprepared.
  • No credit card
  • Easy setup
Subscribe to our newsletter! 📥
One update per month. All the latest news and sneak peeks directly in your inbox.
support@datocms.com ©2024 Dato srl, all rights reserved P.IVA 06969620480