Deploy a Next.js and Contentful Project to Cloudflare Pages
In this lesson, you'll learn how to create a new Cloudflare Pages project from an existing GitHub repository.
Cloudflare Pages makes this easy when creating a new project. You can select your GitHub account from a dropdown and see a list of all of your repositories.
Once you've selected your repo you can choose the production branch, select a framework preset, add build commands, and create environment variables.
Instructor: [0:00] I have an existing Next.js project on GitHub that pulls in data from Contentful. You can see the content model of data of which it pulls in. The way I connect this to my GitHub project is through the API keys. To deploy this site, head over to pages.cloudflare.com and log in.
[0:28] I will go ahead and log in because I have an existing account. If you do not have an existing account, please sign up, and you will get to this next screen. This is the interface. To create a new project, click on Create a New Project, which will bring up a list of all your projects on GitHub. We'll select the project that we want to host and begin setup. We can see that the project name mirrors the project.pages.dev URL. If you change the project name, it will also change the URL name. For the purpose of this demo, we're going to leave it as it is.
[1:19] The production branch is what we are trying to deploy. Pages also ships with a bunch of framework presets. For the purpose of this demo, we're going to select Next.js. You can also add environment variables to help with the build process. I'm going to grab the environmental variables from Contentful.
[1:49] You can add your Contentful delivery authorization token and your space ID, as this is what you would need to get the information from Contentful. Now, click Save and deploy. This will trigger a deploy. When that is over, you head over to your Pages dashboard and click on Visit site. Now, we can see our marketing landing page site that draws information from Contentful live at the URL.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!