A Statically generated page using Next.js and Kontent

This boilerplate showcases Next.js's Static Generation feature using Kontent.ai as the data source.

Demo

• https://kontent-ai-boilerplate-next-js.netlify.app/

Getting Started

Deploy

Init project by command line

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example https://github.com/kontent-ai/boilerplate-next-js kontent-boilerplate-next-js
# or
yarn create next-app --example https://github.com/kontent-ai/boilerplate-next-js kontent-boilerplate-next-js

Code development

Environment variables

1. Set up environment variables

   • Copy the .env.local.template file in this directory to .env.local (which will be ignored by Git):

     cp .env.local.template .env.local

2. Run the development server:

   npm run dev
   # or
   yarn dev

🎉 Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

By default, the content is loaded from a shared Kontent.ai project. If you want to use your own clone of the project so that you can customize it and experiment with Kontent, continue to the next section.

Create your own data source project in Kontent.ai

Create Kontent.ai project

To generate the clone of the sample project in order to be able to edit the content, use Sample site generator - use "CREATE A NEW SAMPLE PROJECT" for generating the project.

Connect Kontent.ai project with code base

1. Access the project listing on Kontent.ai application.
2. Select newly generated project (its name is about to be Sample Project M/DD/YYYY, H:MM:SS AM/PM).
3. Set env variables on .env.local:
   • KONTENT_PROJECT_ID - Should be the Project ID in Project settings > API keys.

Content editing development

Run the development server:

npm run dev
# or
yarn dev

🎉 Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying content in Kontent.ai project. The page auto-updates as you edit the content, you just need to publish the changes.

Preview

Next.js offers embedded possibility to preview unpublished content - the preview mode. If you want to include this capability - follow the linked guide, or jum straight to the Kontent.ai example that already includes implementation of the preview and exit-preview API route.

Learn More

To learn more about Next.js, take a look at the following resources:

• Kontent.ai + Next.js blog example - complex sample project setup including i.e. preview functionality, listing, Tailwind CSS, ...
• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• This Mission: Next.js from the Ground Up

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Related content

• Using the Next image component with Kontent.ai assets by Chris Meagher
• Using Azure Pipelines to build and deploy a Next.js app to Azure app services by Chris Meagher
• Build and Deploy a Next.js Blog with Kontent.AI and Vercel by Ondřej Chrastina
• Dynamic routing with Kontent.ai and NextJS by Unplatform
• Solving content preview with Next.js Preview Mode by Richard Shackleton
• How to use Highlight.js on a Next.js site by Ondřej Polesný
• Pre-rendered, server-rendered, or hybrid: Which should I use? by Tom Marshall
• How to improve cache efficiency and reduce costs with Next.js on-demand ISR by Tom Marshall