New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
next.js 14 redirect() inside a server action can't switch between root layouts (was working in next.js 13) #58263
Comments
Still not working in |
The issue is still present in |
Do we have an update on this one? I had to do a bit of a workaround to render my login page instead of the nav as redirect does not work for me: // Next
import { redirect } from "next/navigation"
// Queries
import { getUser } from "@/actions/queries/user/getUser"
// Auth
import { auth } from "@/auth"
// Components
import Nav from "@/components/nav"
// Pages
import LoginPage from "../(auth)/login/page"
export default async function AppLayout({
children,
}: {
children: React.ReactNode
}) {
const session = auth()
if (!session) {
redirect("/login")
}
const user = session !== null ? await getUser() : null
return <>{user ? <Nav user={user}>{children}</Nav> : <LoginPage />}</>
} |
Version |
probably the same issue or very similar: #59217 |
any work around? |
This whole time I thought it was me, but yes this is a pretty major issue for us. |
Still broken in The possible workaround here is that the server action sends back some json data to the client and then the client can do a redirect on client side. Kinda removes the purpose of having server side actions though. Or we can always downgrade back to v13 I guess. |
This email was not delivered due to system error. I discovered it and forwarded to you. issue has been fixed since then
Best Regards
Daniel ***@***.***>
Sr. Systems Engineer
***@***.***<http://www.progress.com/>
PROGRESS SOFTWARE CORPORATION
15 Wayside Rd, Suite 400
Burlington, MA 01803 USA
DIRECT 1 781 207 9256
WWW.PROGRESS.COM<http://www.progress.com/>
From: Jeroen Meeus ***@***.***>
Sent: Tuesday, December 12, 2023 4:51 PM
To: vercel/next.js ***@***.***>
Cc: Subscribed ***@***.***>
Subject: Re: [vercel/next.js] next.js 14 redirect() inside a server action can't switch between root layouts (was working in next.js 13) (Issue #58263)
This actually does work for me for all redirects apart from redirect('/') or redirect('').
I have two root layouts in seperate groups. Where a server action from the login page does a redirect().
image.png (view on web)<https://github.com/vercel/next.js/assets/1027292/fbc991f1-d720-4c92-a60f-b0d0b862aa0d>
—
Reply to this email directly, view it on GitHub<#58263 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ALWM4WBE7JVMBUFERLXAJ6TYJDGV5AVCNFSM6AAAAAA7FGXDWCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNJSHA3DIMRSGU>.
You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>
|
It's still not working |
I'm with the same problem. Redirect is not updating the route |
Same for me. The first 3 hours i thought its about me being fairly new to NextJS but redirecting to some destination within my origin RootLayout works without issues. Its the context switching which breaks the redirect. This one is pretty ugly because it affects one super mainstream use case "redirect after login", where its pretty normal that the login page is inside your "website" Routing Group and the target route is something like a dashboard in the "WebApp" Routing Group. For the time being i will re-architect my loginpage to be a client comoonent which calls a handleSubmit() which calls my server action to auth and then get back JSON to handleSubmit where i will do a Route push. Works but ugly. |
Off topic, but I have to admit that I regret choosing Next 13 for a new project. This whole next generation of next.js kinda feels like a work-in-progress/proof-of-concept project rather than something that is production ready. |
I've spent way too many frustrating hours on this. For me, the work around is to just have a common root layout with minimum markup. Example of /app/layout.tsx
|
Still broken in |
wow, same issue. cant use with condition |
still not working |
because of that i reverted from a two root layout setup to one rootLayout (which basically has no layout at all). |
This works for me as well. For |
This worked! Thank you! This is such an annoying and undocumented issue. Wasted almost 3 hours before I saw this thread. |
Tested it on the latest canary version |
Moving from NuxtJs to NextJs and got the same problem, I am starting to regret it based on this simple requirement :-( |
How hasn't this got much attention? Feels like a pretty big issue. |
Actually, I did get this working as I wanted, bear with me, I am new to NextJs and what I am doing maybe not what is intended but for me, all of my errors have gone and the redirect works as expected along with the different layouts rendering how I want them. In my scenario I wanted 2 layouts, the anon layout and the landing layout. The only difference between those two is that I also have a Navbar in the landing layout. @guscsales is correct, you need the root layout and the other layouts become nested layouts (I think). So what I did is have the layout.tsx in the root of the app, with this being the root layout, it holds all of the top level stuff. (fyi, I have ShadCn also installed) and the other layouts are in route groups (anon) and (landing)
The (anon)/layout.tsx looks like this:-
The (landing)/layout.tsx looks like this:-
In my (anon)/login/page.tsx I have my signin method redirect as below.
Apologies for the messy response, just wanted to let peeps know how I am doing this. Feel free to correct me, as I said, I am new to NextJs. It maybe that the problem derives from the fact that you can/should only have one |
@meszaros-lajos-gyorgy I have just amended your code slightly below and the redirect works as expected: Add layout.tsx in src/app:-
Amend src/app/[locale]/layout.tsx to:
Amend src/app/search/layout.tsx:
Amend src/app/search/[search]/page.tsx to get the params:
let us know if it all works for you. |
I also ended up creating a fake root element called |
I do agree with comment above, that if your architecture is splitted between route groups without any root layout, then you need to have 1 root layout on your project that's used by your next app. I think it's a bug that next cannot redirect to different layout |
Still not working. I have two root layouts for the info. Next version is |
This comment was marked as resolved.
This comment was marked as resolved.
Same here with routing groups and next 14.1.0 |
Having a root layout fixed my problem. My folder looks like this: |
Same here. I love all things Vercel and Next.js, but it's very disappointing to see that the app router still has plenty of bugs and unfinished stuff more than a year after its launch. |
Can't believe this is still a thing... |
Correct, Next.js 14 works now with the Nested layout, to be honest, I think this is not a bug, but a different architecture that comes from a major version. Some important points:
i.e.: you must have a root layout inside "app". This is the official documentation from Next.js: https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#nesting-layouts |
Just got caught out by this when I tried redirecting from one page to another with both having their own layouts. Had to add a rootLayout like others have mentioned. |
Or it could be because you don't have the e.preventDefault() action, which gets triggered after redirecting, resulting in the same page refresh. |
Just came across the same issue, still happening on next |
Will try adding the root layout to my code, but what I have been doing is invoking the |
the issue already discussed in this GH issue vercel/next.js#58263 not sure whether its bug or the new major architecture on next 14
I don't think it's because of a missing root layout in /app. The docs still say that multiple root layouts are allowed with removing the top-level layout file. https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts |
I've added layouts like this so sad I've spent hours on this |
This comment has been minimized.
This comment has been minimized.
This layout trick helped me with actions, it works. Had to move auth to the actions, but didnt want to use them |
The Layout trick works for me and also works with routes But still I guess I will wait for this thing to become more mature before taking it into production |
Link to the code that reproduces this issue
https://github.com/meszaros-lajos-gyorgy/nextjs-14-redirect-bug
To Reproduce
npm run dev
Current vs. Expected behavior
Expected result:
You should land on
/en/search/hello
as that is the hardcoded redirection inside the server action inservices/SiteSearch.service.ts
.( This was the behavior in Next.js
13.4.12
, but it also threw an error (see #53392) )Actual result:
The server action sends back a redirect instruction among the response headers:
X-Action-Redirect: /en/search/hello
but the page does not go to that path
Verify canary release
Provide environment information
Operating System: Platform: linux Arch: x64 Version: #37~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Mon Oct 9 15:34:04 UTC 2 Binaries: Node: 21.1.0 npm: 10.2.0 Yarn: 1.22.15 pnpm: 6.11.0 Relevant Packages: next: 14.0.2 eslint-config-next: 14.0.2 react: 18.2.0 react-dom: 18.2.0 typescript: 5.2.2 Next.js Config: output: N/A
Which area(s) are affected? (Select all that apply)
App Router
Additional context
When I try the same but first opening http://localhost:3000/en/search/world and then try to redirect via the server action then it works without any issues.
I've also wrote down all of the infos above to the readme in my repo.
The text was updated successfully, but these errors were encountered: