Next.js Tutorial with Contentful
![video thumbnail for the video with the id mou4ivn9tz](https://embed-ssl.wistia.com/deliveries/45db3e57e00592bfb62cbd0fb931b214337adcf6.jpg?image_crop_resize=774?image_crop_resized=810x464)
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.
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.
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):
Start the developer server in the Next.js Contentful project.
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. You may now deploy the project using your preferred tool.
Deploy to Vercel: Import your repository into Vercel.
Deploy to Netlify: Import your repository into Netlify.
For any deployment tool, under environment variables, make sure to add in all of the variables from your .env.local file. And now your project is deployed!
![Looking for a Next.js headless content management system solution? Deliver content faster with your favorite JavaScript framework paired with Contentful.](https://images.ctfassets.net/fo9twyrwpveg/6IxDfALbHDVGOWq6ERXYyN/372ef91dcc9f0c290bfd08e1ef8b9627/2022-04_API_first_NEXTjs_Digital_transformation_framework_header.png)
![Logo of Next.js and logo of Contentful within curly brackets](https://images.ctfassets.net/fo9twyrwpveg/4x3QRQrmnmhCt5t6ZgV0va/c86f3b39cd5796633fc7b5e5ee2d7d7d/Next_and_Contentful.png)
![How to add Algolia Instant-Search to your Next.Js application](https://images.ctfassets.net/fo9twyrwpveg/3k1WPF4bejsV5RapoZLBBw/522b07b308cfeba6960fd70f2ea9189d/2021-07How_to_add_Algolia_InstantSearch_to_your_NextJs_application.png)
![Illustration of the Next.js and Contentful intro and setup session](https://images.ctfassets.net/fo9twyrwpveg/6nPYckuNfQd8gD3b4GbvZw/164c26eaf586501093b844a0078eb3dd/pasted_image_0__4_.png)
![Illustration of several windows open, with the frontmost one having Next.js written in it](https://images.ctfassets.net/fo9twyrwpveg/651ne3eSM02yOdVEcjWgb7/e32f8cb38ced6a9619903a3a5023e1eb/BLOG_PaginatingBlogPostswithNextJS.png)