Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.0.0: Fri Sep 15 14:41:34 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T8103
Binaries:
  Node: 20.9.0
  npm: 10.2.3
  Yarn: 1.22.19
  pnpm: 7.25.0
Relevant Packages:
  next: 14.0.3-canary.12
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which example does this report relate to?

with-supabase

What browser are you using? (if relevant)

Chrome 119.0.6045.123

How are you deploying your application? (if relevant)

next dev

Describe the Bug

The "Back" button (the rendered UI's, not the browser's) in the with-supabase example after logging out is unresponsive if a basePath is set.

Expected Behavior

After logging out, clicking the "Back" button (the rendered UI's, not the browser's) should navigate to the configured basePath, e.g., localhost:3000/foo.

To Reproduce

The following steps assume an existing Supabase project and verified user.

Create a Next.js app using the with-supabase template

npx create-next-app hello-supabase -e with-supabase

Update to the canary release

cd hello-supabase && npm install next@canary

Create a .env.local file and update NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY accordingly

cp .env.local.example .env.local

Start the dev server

npm run dev

Navigate to localhost:3000 in your browser, click the "Login" button, fill out the form, then click the "Sign In" button. You should be redirected back to localhost:3000 (logged-in email address displayed in top-right next to the "Logout" button).

Click the "Logout" button. You should be redirected to localhost:3000/login. Click the "Back" button (the one in top-left of the UI, not the browser's) and you should now be at localhost:3000 (expected).

Now, let's add a basePath...

Stop the dev server and update next.config.js

 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  basePath: "/foo",
 };

 module.exports = nextConfig;

Start the dev server

npm run dev

Navigate to localhost:3000/foo in your browser, click the "Login" button, fill out the form, then click the "Sign In" button. You should be redirected back to localhost:3000/foo. Also, a warning might appear in the browser's Console that wasn't there previously (before setting the basePath):

The resource http://localhost:3000/foo/_next/static/css/app/layout.css?v=1700170318709 was preloaded using link preload but not used within a few seconds from the window's load event

Click the "Logout" button. You should be redirected to localhost:3000/foo/login. Click the "Back" button (the one in top-left of the UI, not the browser's), but now nothing seems to happen.

Hovering over the "Back" button displays the correct URL in the browser's status bar (localhost:3000/foo), but clicking the button does not navigate to the basePath.

If you repeatedly click the unresponsive "Back" button enough, an error will eventually occur with the following messages:

Application error: a client-side exception has occurred (see the browser console for more information).

Warning: Cannot update a component (HotReload) while rendering a different component (Router). To locate the bad setState() call inside Router, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

Uncaught Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.