Next.js

What is Next.js?Anchor

Next.js is a hybrid framework for both server-rendered and static JavaScript applications.

A framework that can be used with any back-end technology, Next.js brings the convenience of a modern framework and the performance and SEO benefits of pre-rendering to all websites and apps.

Benefits of NextJSAnchor

It's a JavaScript library that is well documented with a vibrant community with superb developer ergonomics.

Allows you to use modernized syntax. The library is built for the latest web technologies. The syntax is modern and straightforward to read. It has a lot of built-in functionality that will enable you to start using it quickly.

GraphQL and NextJSAnchor

If you're new to GraphQL, using NextJS is a good start! It offers a more REST-like API, with a few more features.

For GraphQL, check out this blog post. You can use the API to query a GraphQL database.

Why use a Headless CMS with Next.jsAnchor

Using a Headless CMS for Next.js websites and applications let's you take advantage of advanced Next.js lifecycle methods to access the data on the client, all server-rendered.

Take the power of Next.js and combine it with a headless CMS for your Progressive Web Application, eCommerce store, or Desktop app project.

Next.js boasts incredible server-side rendering, static exporting, CSS-in-JS and comes with all the boilerplate configured for an out-of-box ready experience. Paired with a Headless CMS for Nextjs, teams will reap the benefits of a highly performant site that gives more independence to the marketing team without compromising on developer experience.

Learn more about working with GraphCMS and Next.jsAnchor

We've worked through several examples of working with GraphCMS as a Next.js Headless CMS, here are a few to go through:

With Next.jsAnchor

This example demonstrates how to query from GraphCMS with graphql-request in Next.js.

• Demo

How to Use

Download Manually

npx degit graphcms/graphcms-examples/with-nextjs with-nextjs

Install & Run:

cd with-nextjs
npm install
npm run dev
# or
cd with-nextjs
yarn
yarn dev

Run on Codesandbox

With next.js i18n RoutingAnchor

This example demonstrates how to use Next.js Internationalized Routing with localized GraphCMS content.

• Demo

How to Use

Download Manually

npx degit graphcms/graphcms-examples/with-nextjs-i18n-routing with-nextjs-i18n-routing

Install & Run:

cd with-nextjs-i18n-routing
npm install
npm run dev
# or
cd with-nextjs-i18n-routing
yarn
yarn dev

Run on Codesandbox

With Next.js Image Component with Custom LoaderAnchor

This example demonstrates how to use a custom loader function with Next.js Image Component and GraphCMS assets.

This allows you to perform asset transformations using the GraphCMS CDN, rather than the default Next.js loader.

By using a custom loader, you will forgo the image caching provided by the default Next.js loader. Learn more here.

• Demo

How to Use

Download Manually

npx degit graphcms/graphcms-examples/with-nextjs-image-loader with-nextjs-image-loader

Install & Run:

cd with-nextjs-image-loader

npm install

npm run dev

# or

cd with-nextjs-image-loader

yarn

yarn dev

Run on Codesandbox

With Next.js Image ComponentAnchor

This example demonstrates how to use the Next.js Image Component with your GraphCMS assets.

• Demo

How to Use

Download Manually

npx degit graphcms/graphcms-examples/with-nextjs-image with-nextjs-image

Install & Run:

cd with-nextjs-image

npm install

npm run dev

# or

cd with-nextjs-image

yarn

yarn dev

Run on Codesandbox

With Next.js and MDXAnchor

This example demonstrates how to use markdown fields from GraphCMS with MDX in Next.js.

• Demo

How to Use

Download Manually

npx degit graphcms/graphcms-examples/with-nextjs-mdx-remote with-nextjs-mdx-remote

Install & Run:

cd with-nextjs-mdx-remote

npm install

npm run dev

# or

cd with-nextjs-mdx-remote

yarn

yarn dev

Run on Codesandbox

GraphQL, Next.js, and GraphCMS are a powerful combination when building Jamstack applications.

To get up and running with querying content from GraphCMS using GraphQL in your Next.js application, sign up for a free-forever developer account and start your first project!