Deploy a Next.js App to Vercel From GitHub with Environment Variables

InstructorColby Fayock

Share this video with your friends

Send Tweet

Building apps take time and when we get to deployment, we don't want to be slowed down by manual builds and complicated infrastructure.

Vercel makes deploying modern web apps easy by handling all the steps including pulling in the latest changes on your Git repository, building it up, and deploying it out to the world.

We'll walk through importing a Next.js project to Vercel using an existing GitHub repository and configure it to deploy to Vercel. In order to allow us to configure our Snipcart API key per environment, we'll set up environment variables in our Vercel deploy to store our API key.

Lex
~ 2 years ago

Parse variable inside dangerouslySetInnerHTML

How to make sure process.env.NEXT_PUBLIC_SNIPCART_API_KEY variable is seen inside dangerouslySetInnerHTML. The key is parsed as a string but not as a variable.

Thank you

Lex
~ 2 years ago

Deployed to Vercel and having a CORSE error when checking out

Access to XMLHttpRequest at 'https://app.snipcart.com/api/cart/a827ede9-1ffb-4c7e-8ff2-0f7e92c52ba3/pay' from origin 'https://addresshere.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

What would be the correct solution in next.js?

Lex
~ 2 years ago

I'm still looking for a solution.

Lex
~ 2 years ago

Sorry please ignore the last two comments. I wrote them in a wrong thread. Original question is what's needed

Lex
~ 2 years ago

Oh no, this was correct thread. Most importantly, I am looking to solve the CORS error when checking out

Access to XMLHttpRequest at 'https://app.snipcart.com/api/cart/a827ede9-1ffb-4c7e-8ff2-0f7e92c52ba3/pay' from origin 'https://addresshere.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Please help, and thank you!

Lex
~ 2 years ago

Got one solution.

My product pages were statically generated. I have a gut feeling Snipcart fails validating pages served as static.

I switched rendering page at runtime in next.js and problem is gone. But it’s not ideal because now product pages are build everytime user visits page instead of static.

Lex
~ 2 years ago

Seems like the course needs an update. Or please clarify would be nice from the author