A statically generated blog example using Next.js and Webiny

This example showcases Next.js's Static Generation feature using Webiny as the data source.

Demo

https://webiny-headlesscms-nextjs-example.vercel.app

Deploy your own

Deploy the example using Vercel:

Related examples

• WordPress
• DatoCMS
• Sanity
• TakeShape
• Prismic
• Contentful
• Strapi
• Agility CMS
• Cosmic
• ButterCMS
• Storyblok
• GraphCMS
• Kontent
• Umbraco Heartcore
• Builder.io

How to use

Execute create-next-app to bootstrap the example:

npx create-next-app nextjs-blog-webiny --example "https://github.com/webiny/nextjs-starter-webiny/tree/master"

Step 1. Set up a Webiny project

Follow the Webiny docs to install a Webiny project on your cloud hosting provider. Because Webiny is a distributed system we don't run it locally. This also means you don't need to worry about setting up Docker, or installing databases and drivers on your local machine for Postgres, MongoDB or similar. The cloud takes care of that for you.

If you get stuck or have any questions, please join the community and reach out for some help.

Once you have an app up and running click into the "HeadlessCMS" app in the sidebar, click on models and add the following models and fields:

Authors

• A text field with the value "name"
• A text field with the value "slug" (optionally add a validator using this regex which will make sure you have valid urls: ^(?!.*--)[a-z0-9\-]+$)
• a files field with the value "picture"

Posts

• A text field with the value "title"
• A text field with the value "slug" (optionally use the regex above as a validator)
• A files field with the value "featured image"
• A rich text field with the value "body"
• A reference field with the value "Author"

Next, choose API Keys in the sidebar. Add an API key with any name and description. Select "Headless CMS" and choose a Custom access level for all content model groups with the values read and preview. Save the API token and the token itself will be revealed.

You will be able to use the same API token for both published and draft posts.

Step 2. Set up environment variables

Copy the .env.local.example file to .env.local, then set the variables as follows:

• PREVIEW_API_SECRET can be any random string (but avoid spaces), like MY_SECRET - this is used for Preview Mode.
• WEBINY_API_SECRET this will be your security token generated in Webiny
• You can find the values for NEXT_PUBLIC_WEBINY_API_URL and NEXT_PUBLIC_WEBINY_PREVIEW_API_URL two ways: From your local Webiny project root, run yarn webiny info, alternatively go to API Playground in the sidebar. At the top of the GraphQL explorer are four tabs, one for each of our APIs, and you'll see both the Read API and the Preview API on those tabs. The URL for your environment is just below the tab. (More info here if you get stuck)

Step 3. Run Next.js in development mode

Inside the Next.js app directory, run:

npm install
npm run dev

# or

yarn install
yarn dev

Your blog should be up and running on http://localhost:3000!

The best place to debug is inside the fetchAPI function in lib/api.js. If you need help, you can post on GitHub discussions.

Step 4. Try preview mode

If you go to the /posts/draft page on localhost, you won't see this post because it’s not published. However, if you use the Preview Mode, you'll be able to see the change (Documentation).

To enable the Preview Mode, go to this URL:

http://localhost:3000/api/preview?secret=<secret>&slug=draft

• <secret> should be the string you entered for PREVIEW_API_SECRET.
• <slug> should be the post's slug attribute.

You should now be able to see the draft post. To exit the preview mode, you can click Click here to exit preview mode at the top.

To add more preview pages, create a post and set the status as draft.

Step 5. Deploy on Vercel

You can deploy this app to the cloud with Vercel (Documentation).

Deploy Your Local Project

To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and import to Vercel.

Important: When you import your project on Vercel, make sure to click on Environment Variables and set them to match your .env.local file.

Deploy from Our Template

Alternatively, you can deploy using our template by clicking on the Deploy button below.