Build your first Next.js starter with Contentful. The combination of Next.js with a headless CMS like Contentful gives you the power to quickly build scalable dynamic static websites with improved search engine optimization (SEO) and enhanced performance.
Create a new Next project on your local machine using our Next.js Contentful starter template. Our template is a blog that includes a pre-built content model JSON file, a homepage and individual blog pages, and uses Tailwind CSS for styling.
npx create-next-app --example cms-contentful cms-contentful-app cd cms-contentful-app
Create a Contentful account with an empty space.
Import a sample content model into your space.
You will need your Space ID and you will need to create a Content Management Token. You can find your Space ID in the Contentful app in Settings under API Keys. Click on Add API key.
You will also need to create a Content Management API token. Avoid sharing this token because it allows both read and write access to your Contentful space. Once the token is generated copy the key and save remotely as it will not be accessible later on. If lost, a new one must be created.
Use your Space ID and Content Management Token in the command below to import the pre-made content model into your space.
npx cross-env CONTENTFUL_SPACE_ID=YOUR_SPACE_ID CONTENTFUL_MANAGEMENT_TOKEN=XXX npm run setup
This imports a template content model so you can skip manual config.
Add at least 1 author entry and 2 post entries into your space. Click on Content in the top navigation bar to do so. Make sure you publish each entry.
Create a .env.local file and include the following values (which can be found under API keys in settings):
CONTENTFUL_SPACE_ID=your Space ID CONTENTFUL_ACCESS_TOKEN=Content Delivery API token CONTENTFUL_PREVIEW_ACCESS_TOKEN=Content Preview API token
CONTENTFUL_PREVIEW_SECRET=any URL friendly value of your choice
Start the developer server in the Next.js Contentful project.
npm run dev
Your project should now be running on http://localhost:3000.
Note: If you are unable to see content populating in your local blog, you may be hitting GraphQL query limits. Add a limit to the postCollection queries in lib/api.js. Check out our GraphQL docs for more information.
At this point, you can now modify your Next.js application by updating the CSS, changing the content model, or even modifying the blog homepage. You can update the homepage in the index.js file and if you change your Contentful content model, make sure to update the GraphQL query in the api.js file.
Create a repository on GitHub (or other website of your choosing). Commit your changes to your local project and push your project to your repository on GitHub.
Commit your changes and push your project to a repository on GitHub. Import your repository into Vercel. Under environment variables, add in all of the variables from your .env.local file. And now your project is deployed!