Error during deployment Next js on Vercel
Answered
khan786 posted this in #help-forum
khan786OP
i am going to deploy my next js project on vercel which return error .Actually error is returning from my blog api calling
e.g
confusion is how to get production end point key NEXT_PUBLIC_API_URL key i have write but i think this is wrong one.
there are two key shown under
Domains
1. > [next-blog-app-9caf-git-main-irfankundi786s-projects.vercel.app](https://next-blog-app-9caf-git-main-irfankundi786s-projects.vercel.app/)
2. > [next-blog-app-9caf-6v4g3bt4l-irfankundi786s-projects.vercel.app](https://next-blog-app-9caf-6v4g3bt4l-irfankundi786s-projects.vercel.app/)
Error Logs shown in Vercel is pasted here
e.g
/// FETCH DATA WITH AN API
const getData = async () => {
const res = await fetch(${process.env.NEXT_PUBLIC_API_URL}, {
next: { revalidate: 3600 },
});
NEXT_PUBLIC_API_URL=https://next-blog-app-9caf-40n0oadte-irfankundi786s-projects.vercel.app/confusion is how to get production end point key NEXT_PUBLIC_API_URL key i have write but i think this is wrong one.
there are two key shown under
Domains
1. > [next-blog-app-9caf-git-main-irfankundi786s-projects.vercel.app](https://next-blog-app-9caf-git-main-irfankundi786s-projects.vercel.app/)
2. > [next-blog-app-9caf-6v4g3bt4l-irfankundi786s-projects.vercel.app](https://next-blog-app-9caf-6v4g3bt4l-irfankundi786s-projects.vercel.app/)
Error Logs shown in Vercel is pasted here
TypeError: Failed to parse URL from next-blog-app-9caf.vercel.app
at new Request (node:internal/deps/undici/undici:9271:19)
at i (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:174332)
at U (/vercel/path0/.next/server/chunks/638.js:1:39485)
at /vercel/path0/.next/server/chunks/638.js:1:41598 {
[cause]: TypeError: Invalid URL
at new URL (node:internal/url:797:36)
at new Request (node:internal/deps/undici/undici:9269:25)
at i (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:174332)
at U (/vercel/path0/.next/server/chunks/638.js:1:39485)
at /vercel/path0/.next/server/chunks/638.js:1:41598 {
code: 'ERR_INVALID_URL',
input: 'next-blog-app-9caf.vercel.app'Answered by joulev
for the logic used in your api route, you move it from the api route to the server component and run it directly inside the server component
12 Replies
@khan786 i am going to deploy my next js project on vercel which return error .Actually error is returning from my blog api calling
e.g `/// FETCH DATA WITH AN API
const getData = async () => {
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}`, {
next: { revalidate: 3600 },
});
NEXT_PUBLIC_API_URL=https://next-blog-app-9caf-40n0oadte-irfankundi786s-projects.vercel.app/
`
confusion is how to get production end point key NEXT_PUBLIC_API_URL key i have write but i think this is wrong one.
there are two key shown under
**Domains**
1. > [next-blog-app-9caf-git-main-irfankundi786s-projects.vercel.app](https://next-blog-app-9caf-git-main-irfankundi786s-projects.vercel.app/)
2. > [next-blog-app-9caf-6v4g3bt4l-irfankundi786s-projects.vercel.app](https://next-blog-app-9caf-6v4g3bt4l-irfankundi786s-projects.vercel.app/)
Error Logs shown in Vercel is pasted here
`TypeError: Failed to parse URL from next-blog-app-9caf.vercel.app
at new Request (node:internal/deps/undici/undici:9271:19)
at i (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:174332)
at U (/vercel/path0/.next/server/chunks/638.js:1:39485)
at /vercel/path0/.next/server/chunks/638.js:1:41598 {
[cause]: TypeError: Invalid URL
at new URL (node:internal/url:797:36)
at new Request (node:internal/deps/undici/undici:9269:25)
at i (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:174332)
at U (/vercel/path0/.next/server/chunks/638.js:1:39485)
at /vercel/path0/.next/server/chunks/638.js:1:41598 {
code: 'ERR_INVALID_URL',
input: 'next-blog-app-9caf.vercel.app'`
it should include the protocol, i.e.
BUT: don't fetch your own api routes in server components: https://nextjs-faq.com/fetch-api-in-rsc
await fetch(`https://${process.env.NEXT_PUBLIC_API_URL}`)BUT: don't fetch your own api routes in server components: https://nextjs-faq.com/fetch-api-in-rsc
khan786OP
this my code const getData = async () => {
const res = await fetch(
next: { revalidate: 3600 },
}); i am still confuse about to get NEXT_PUBLIC_API_URL=https://next-blog-app-9caf-40n0oadte-irfankundi786s-projects.vercel.app/
const res = await fetch(
${process.env.NEXT_PUBLIC_API_URL}, {next: { revalidate: 3600 },
}); i am still confuse about to get NEXT_PUBLIC_API_URL=https://next-blog-app-9caf-40n0oadte-irfankundi786s-projects.vercel.app/
how to get correct url as i face error during deployment
NEXT_PUBLIC_API_UR= ? from where i get this ?
BUT: don't fetch your own api routes in server components: https://nextjs-faq.com/fetch-api-in-rsc
khan786OP
how to fetch? what is solution?
read the link
khan786OP
I read it but do not understand
for the logic used in your api route, you move it from the api route to the server component and run it directly inside the server component
Answer
what's the content of your api route?
khan786OP
thank you @joulev i resolved it but there is one another issue that is i deployed on vercel but it require authentication from vercel if not login into vercel.I have account so i can authenticate and see the website but if user is not member of vercel how he can authenticate ?