ZippyStarter logo

Deploy with Cloudflare

Ready to deploy to Cloudflare? Because of the edge runtime you'll have to make preparations.

Preparation

Due to Cloudflare pages utlising the edge runtime—which doesn't have access to the same components as the node runtime—ZippyStarter requires a few adjustments.

Images

Any files that import NextImage, which is a custom component, will need those imports replacing with Image which comes from next.js.

For instance:

import NextImg from "@/components/NextImg";

Becomes:

import Image from "next/image";

These components are interchangeable, you may find you have to specify image width and height as NextImg does this automatically as it has access to the file system. If this is the case, you'll get console errors telling you that is the case.

Here's a list of the files:

  • src/app/demo
  • src/components/Author
  • src/components/PostCard
  • src/components/MdxComponents
  • src/components/templates/blog/BlogTemplate

It shouldn't take long 😇.

Routes

There are two routes, one of which will need to be converted to use the edge runtime, the other (if you arent using) can simply be deleted.

Updated

This route: src/app/api/contact/route.ts is used to display the time from the last commit to the main branch on github.

Convert to edge runtime by adding: export const runtime = 'edge' to the top of the file, or just delete it and any references to it.

Contact

This is for the contact form which depends on nodemailer, locate the file here: src/app/api/updated/route.ts

If you aren't using the contact form, simply delete this file and any references to it, if you are you'll either have to use the node runtime, or a different provider other than nodemailer.

Deployment Steps

  1. Initialise and push your code into a git repository
  2. Create a Cloudflare account (if you don't already have one)
  3. Follow the easy-to-understand instructions provided by Vercel to set up the git integration
  4. Ensure any environment variables are also added to Vercel's settings, e.g. NEXT_PUBLIC_DOMAIN, or your deployment will fail
  5. Depending upon your choices, the code will have either been deployed to a preview or production environment, from this point you can decide what to do