- Eugene Musebe
👋🏼 Hi am Eugene Musebe,
䷐ Twitter Handle : _musebe
✉️ Email : firstname.lastname@example.org
👷🏽♂️ Company : Cloudinary
🥑 Role : Developer Advocate
Sponsored by Mediajams
Follow MediaDevs on Twitter : MediaDevs
Join Mediajams Discord Server : Discord Server
Event Registration : Link
What is the Jamstack ?
Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It builds on many of the tools and workflows which developers love, and which bring maximum productivity.
With Jamstack, the entire front end is prebuilt into highly optimized static pages and assets during a build process. This process of pre-rendering results in sites which can be served directly from a CDN, reducing the cost, complexity and risk, of dynamic servers as critical infrastructure.
We'll be deploying a Jamstack application (NextJS app) to the following platforms :
Netlify : Cloudflare pages
Create a Vercel account
Create a Cloudinary account
Pull project from Github
Login to the Netlify dashboard
Pull project from github
Add env variables
Cloudflare Pages Deployment
Step 1: Creating a new Next.js app
Navigate to the directory you want to create the project in, then run the following:
yarn create next-app my-cloudflare-page # or npx create-next-app my-cloudflare-page
Note: feel free to replace my-cloudflare-page with the project name of your choice
Once it’s finished, navigate to your new directory, and start your development server:
yarn dev # or npm run dev
Step 2: Configuring Next.js to export a static website
By default, Next.js will take advantage of server-side processing to load the site. This happens locally automatically inside of node with the local server we spun up with Next.js.
If we were deploying this application to Vercel, that would be okay, because they handle that processing by default, but we’ll be deploying to Cloudflare Pages, which will host the site statically.
To configure our new application, we can head over to our package.json file, and instead of the build script, update it to the following:
"build": "next build && next export",
This will tell our application that whenever we want to build it, it will first build the application into a Next.js-specific configuration, but then we’ll also export it, which will compile that application into static files that by default will be placed in the out directory.
We can try this out ourselves in our terminal by running the build command:
npm run build
Step 3: Adding a Next.js project to a new GitHub repository and deploying to Cloudflare
With our Next.js app ready to go, we now want to set it up inside of GitHub as a new repository.
Note: for this step, you’ll need to have a GitHub account, which is free to create.
Next, Cloudflare is going to ask for a few details related to the project.
- Project name: this will be whatever you want to name this project, which you can just leave “as is” which is prefilled with your repository name
- Production Branch: the branch where Cloudflare deploys the main project from, only change this if you want to deploy from a different branch
- Framework preset: the framework which was used to build the project in the repository, select Next.js or whatever project framework you’re using, Cloudflare will automatically fill in the rest of the fields
- Build command: the command(s) used to build your project, you can either leave this field “as is” or if you’d like to maintain the build command from your package.json like we set up before, you can change this to yarn build
- Build output directory: where the static files from the build command are output to, similar to the others, you can leave this as out, unless you changed the output directory You can ignore Root directory and Environment variables unless you’re working with an advanced configuration
Finally, hit Save and Deploy!
Cloudflare will now start up a new environment, clone the Git repository, build the application, and deploy it! You can follow along right on the Deployment Details page, it should only take a few minutes.
But once it’s finished, you’ll now see a URL at the top of the Deployment details section.
🎉🎉🥂🍾 Cheers on getting this far. Cant wait to see the platform you’ll use to deploy your Next application 😊