How to deploy your Next.js site from GitHub to Cloudflare or Vercel, step by step

1. 01Go to vercel.com and sign up with your GitHub account. Choose the Pro plan if this is a business site.
2. 02Click Add New, then Project.
3. 03Vercel asks to install its GitHub app. Choose “Only select repositories” and pick your site’s repository. It doesn’t need the rest.
4. 04Click Import next to your repository. Vercel detects Next.js and fills in every setting.
5. 05Click Deploy. In a minute or two you get a live address ending in .vercel.app.

That’s it. From now on, merging into main deploys the live site, and every pull request gets its own preview link posted right on GitHub.

First, tell Next.js to build plain files. Open next.config.mjs (or next.config.ts) in your repository and add two settings. Commit it to main, using the steps from editing your own Next.js site.

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",              // build the site as plain files in /out
  images: { unoptimized: true }, // serve images as they are
}

export default nextConfig

1. 01Sign up at dash.cloudflare.com. The free plan is fine.
2. 02Go to Workers & Pages, click Create, and choose the Pages option to import an existing Git repository.
3. 03Connect GitHub and give Cloudflare access to only your site’s repository.
4. 04Pick the repository. For the framework preset, choose “Next.js (Static HTML Export)”. It fills in the build command (npx next build) and the output folder (out).
5. 05Click Save and Deploy. A few minutes later you have a live address ending in .pages.dev.

If the build fails and the error mentions output: export, a page on your site needs a server. Either move that feature to a service, or deploy on Vercel, or follow Cloudflare’s full Next.js guide.

Cloudflare moves fast and its menus get renamed. If a label here doesn’t match your screen, look for the move it describes: import a GitHub repository, choose the static Next.js preset, deploy.

1. 01In your project, open the domains section (Settings, then Domains on Vercel; Custom domains on Cloudflare) and add your domain, both yoursite.com and www.yoursite.com.
2. 02The host shows you one or two records to add. Log in where your domain is registered, open its DNS settings, and add exactly what it shows.
3. 03If your domain already uses Cloudflare for DNS, Cloudflare adds the records for you.
4. 04Pick one address as the real one (we use www) and let the host redirect the other to it.
5. 05Wait. Usually minutes, sometimes a few hours. The host shows a green check when it’s done and turns on HTTPS by itself.

Don’t touch your MX records. Those run your email. You’re only adding web records.

Once the domain works, make sure your site tells Google to index your real domain and not the .vercel.app or .pages.dev address. It’s the most common thing to go wrong right after this step. The check and the fix are in why Google is indexing the wrong domain.

Every page address from your old site needs to land somewhere real. On Vercel, a full Next.js site can list redirects in its config. On a static Cloudflare site, add a plain text file named _redirects inside the public folder, one line per old address.

/about-us/                  /about        301
/our-services/              /services     301
/2024/05/spring-hours/      /blog/hours   301
/contact-us/                /contact      301

Your old sitemap is the list to work from. Part one, how to leave WordPress, covers saving it before you switch.

• Merge into main and the host rebuilds the live site, usually in one to three minutes.
• Open a pull request and the host builds a preview of just that branch, at its own address, and posts the link on GitHub.
• If a build fails, the live site doesn’t change. The last good version stays up.
• To roll back, open your project’s list of deployments, pick the last good one, and promote or roll back to it. One click on either host.

1. 01Open every page on your phone and on a computer, on the real domain.
2. 02Send a test message through every form and confirm it arrives.
3. 03Visit three or four old WordPress addresses and confirm they redirect.
4. 04View the page source and check the canonical link uses your real domain.
5. 05Add your sitemap (yoursite.com/sitemap.xml) in Google Search Console.
6. 06Write down where your domain, DNS, host and GitHub logins live.

Then, the fun part. Part five: editing your site with Claude, ChatGPT or Grok, with prompts you can copy.

A static export has no server. That rules out API routes, server actions, middleware, and anything that changes per visitor on the server. Forms still work through a form service, and anything interactive in the browser still works. Logins and live data don’t, without more setup.

Next.js redirects listed in the config also don’t run in a static export. Use the _redirects file instead.

And hosting plans change. The free tiers here are generous today, but check the current terms once a year, especially Vercel’s rule on commercial use.