Jordan Dovey
Jordan Dovey

Reputation: 35

Cloudflare Pages

I am deploying a next js app to cloudflare pages. It needs to connect to a supabase project using a url and key. I have set these as env variables on the cloudflare dashboard for the project but the project does not seem to retrieve them properly.

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string

This works for getting the local env variables set in a an .env.local file but not when deploying to cloudflare.

Screenshot of cloudflare env variables

Upvotes: -3

Views: 139

Answers (1)

emild_
emild_

Reputation: 93

When deploying a Next.js static site build app on Cloudflare Pages, and using Supabase as your backend, you must ensure proper configuration of CORS (Cross-Origin Resource Sharing) to allow your frontend to communicate with the backend. Here's a guide to address this setup:

  1. Supabase CORS Configuration
  • Log in to your Supabase account.

  • Go to the API Settings for your project.

  • Locate the Allowed Origins section.

  • Add your Cloudflare Pages domain (e.g., https://yourdomain.pages.dev) and any custom domain you use.

Example:

https://yourdomain.pages.dev, https://www.yourcustomdomain.com, http://localhost:3000

  1. Cloudflare Pages Deployment

Make sure your Next.js app is built as a static export. In your next.config.js, configure:

module.exports = {
  output: 'export', // Ensures static HTML export
};

Use next export to generate the static files before deployment.

  1. Testing the Integration

Verify your frontend calls to the Supabase backend. Check for errors in the browser console, particularly those related to CORS.

If you encounter issues, double-check that:

The Allowed Origins in Supabase include the exact domain you’re using (with and without www).

The Cloudflare Pages deployment reflects your static files correctly.

  1. Troubleshooting

Error in Browser Console: If you see errors like "Access to fetch has been blocked by CORS policy," it means the Allowed Origins are not configured correctly.

Upvotes: 0

Related Questions