The Easiest Way to Host a Next.js Static Site on Cloudflare Pages

October 29, 2024 (4d ago)

The Easiest Way to Host a Next.js Static Site on Cloudflare Pages with a GitHub Repo

Welcome to this guide! Today, we will learn the easiest way to host a Next.js static site on Cloudflare Pages using a GitHub repository. Cloudflare Pages offers a simple and fast solution for deploying static web applications and Jamstack. Let's get started!

Prerequisites

Before we begin, make sure you have:

  1. A GitHub account
  2. A Cloudflare account
  3. A GitHub repository containing your Next.js static site

Step 1: Prepare Your GitHub Repository

Ensure your GitHub repository already contains your Next.js static site ready for deployment. If not, create a new repository and push your Next.js code there.

Step 2: Create a New Project on Cloudflare Pages

  1. Login to Cloudflare: Open Cloudflare and log in to your account.

  2. Create a New Project:

    • In the Cloudflare dashboard, click on the Pages menu on the left.
    • Click the Create a project button.

  3. Select Your GitHub Repository:

    • Select Connect to GitHub and allow Cloudflare to access your GitHub repositories.
    • Select the repository containing your Next.js static site.

Step 3: Configure Build Settings

  1. Select Framework:

    • Cloudflare Pages will automatically detect that you are using Next.js. If not, select Next.js from the list of available frameworks.

  2. Configure Build Command and Output Directory:

    • Build command:
    npm run build
    • Output directory: ./next
    ./next

  3. Configure Environment Variables:

    • If your application requires environment variables, add them here.

  4. Click Create project.

Step 4: Deploy Your Application

  1. Wait for the Build Process:

    • Cloudflare will start the build and deployment process for your application. You can view the build status on the project page.

  2. Access Your Application:

    • Once the build process is complete, you will receive a URL for your application. Open the URL in your browser to see your deployed Next.js application.

Step 5: Configure a Custom Domain (Optional)

If you want to use a custom domain for your application, follow these steps:

  1. Add Your Domain:

    • On the Cloudflare Pages project page, click on the Custom domains tab.
    • Click Set up a custom domain and enter your domain.

  2. Verify Your Domain:

    • Follow the instructions to verify your domain. This usually involves adding DNS records to your domain registrar.

  3. Wait for Verification:

    • Once your domain is verified, Cloudflare will point it to your application.

Conclusion

With the steps above, you have successfully deployed your Next.js application to Cloudflare Pages using a GitHub repository. This process is very simple and fast, allowing you to focus on developing your application without worrying about infrastructure.

Happy deploying, and good luck! If you have any questions or comments, feel free to leave them below.

References

LinkedIn