404 Error when Deployed to Vercel

[Lightgaming]

Hello!

So I have a school project that uses Next.js and I implemented your auth framework to handle the authentication part. (lovely framework btw :D)

Everything works fine when I run it locally but when I deploy it to Vercel the dynamic routes return 404

At first, I thought it was an NEXTAUTH_URL error, but it's doing the correct requests.

Then I saw a post about having an api folder next to the pages folder, which I have fixed - it's now called backend.

Folder Structure:

/backend
/pages/api/[...nextauth].ts
/pages/_app.ts
...

Here is the Vercel Build Log:

next build
19:49:30.989 | info - Creating an optimized production build...
19:49:50.881 | info - Compiled successfully
19:49:50.881 | info - Collecting page data...
19:49:55.497 | info - Generating static pages (0/6)
19:49:58.226 | info - Generating static pages (1/6)
19:49:58.270 | info - Generating static pages (2/6)
19:49:58.303 | info - Generating static pages (4/6)
19:49:58.420 | info - Generating static pages (6/6)
19:49:58.421 | info - Finalizing page optimization...
19:49:58.438 | Page Size First Load JS
19:49:58.438 | ┌ ○ / 285 B 142 kB
19:49:58.439 | ├ /_app 0 B 141 kB
19:49:58.439 | ├ ○ /404 3.46 kB 145 kB
19:49:58.439 | ├ ○ /about 835 B 142 kB
19:49:58.439 | ├ ○ /admin 8.14 kB 150 kB
19:49:58.439 | ├ ○ /groups 287 B 142 kB
19:49:58.439 | └ ○ /projects 13.9 kB 155 kB
19:49:58.439 | + First Load JS shared by all 141 kB
19:49:58.439 | ├ chunks/1e399a037b3db9787b6d98d8a22c8de51d13189d.56332f.js 19.5 kB
19:49:58.439 | ├ chunks/450e5df8fac4ef5f399f38c87f7e6bffba7d28e5.f11ca9.js 8.52 kB
19:49:58.439 | ├ chunks/b8cd623695ec97ec665a179189d5bbe179d34bad.3ee20a.js 17.3 kB
19:49:58.439 | ├ chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.cfbd16.js 12.5 kB
19:49:58.439 | ├ chunks/framework.2e756d.js 40.2 kB
19:49:58.440 | ├ chunks/main.c81828.js 7.45 kB
19:49:58.440 | ├ chunks/pages/_app.375399.js 35.4 kB
19:49:58.440 | ├ chunks/webpack.50bee0.js 751 B
19:49:58.440 | └ css/e7b18878e35adc3e9bb8.css 142 B
19:49:58.440 | λ (Lambda) server-side renders at runtime (uses getInitialProps or getServerSideProps)
19:49:58.440 | ○ (Static) automatically rendered as static HTML (uses no initial props)
19:49:58.440 | ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
19:49:58.440 | (ISR) incremental static regeneration (uses revalidate in getStaticProps)
19:49:59.451 | Uploading build outputs...
19:50:06.273 | Build completed. Populating build cache...
19:50:43.952 | Uploading build cache [70.04 MB]...
19:50:47.509 | Build cache uploaded: 3555.694ms
19:50:47.738 | Done with "package.json"

Please Help me.

[balazsorban44]

Hi there, it should be pages/api/auth/[...nextauth].ts, you just missed the auth part. 😉

[balazsorban44]

config/options, same. 🙂

Right. So could you maybe console.log your NEXTAUTH_URL variable so it's 100% correct?

tip, you can create an api endpoint

export default (_, res) => res.end(process.env.NEXTAUTH_URL)

(please be sure that there is no typo in it, and it's the full host url, without /api/auth, eg https://example.com)

Also, https://next-auth.js.org/getting-started/rest-api do you get 404 on all GET pages here, or just providers?

[Lightgaming]

Interesting... I created a file /pages/api/url.ts and put in your snippet, tested it locally (it works) but once deployed I get a 404 again.
But I think it should be correct, since I'm using the signIn() method in my Login form and that request has the correct url in front.

(I did it with the Vercel Env Variable tool where I mapped the VERCELURL Variable to the NEXTAUTH_URL Variable)

I also added a console.log(process.env.NEXTAUTH_URL); to my _app.tsx file, but it just returns undefined 🤷

I think it's all of them. I tested providers, signin, signout and session

Here is the current build Link to it: https://self-service-jnylhmi6u.vercel.app/

[balazsorban44]

app WILL return undefined because of how nextjs handles env variables client side. (variables not prepended with NEXT_PUBLIC won't be available to prevent accidentally publishing a secret), so that's not strange.

But since your url api handler did not work either I suspect your problem is not next-auth specific

[Lightgaming]

Yeah, probably. I'll go to the Vercel discussions then.
Thanks for your help tho!

[balazsorban44]

@Lightgaming https://self-service-jnylhmi6u.vercel.app/api/auth/providers Something is definitely fishy. Going directly to this URL should not show the landing page, but return some JSON.

Do you maybe use react-router?