My project folder structure is organized like this:
-
app
- (app)
- dashboard
- page.tsx
- page.tsx
- layout.tsx
- (auth)
- login
- page.tsx
- register
- page.tsx
- page.tsx
- layout.tsx
I can easily move between the login and register pages using the redirect method (from next/navigation). However, I am facing issues redirecting to the dashboard page as well as redirecting from the dashboard to login or register.
P/s: Although I can navigate using useRouter().push, I prefer using the redirect method because the redirection logic is server-side.
P/s: Upon executing the redirect, my terminal logs show POST / 303 but nothing happens.
Here is the updated code where I redirect from "/" to the login page:
import { redirect } from "next/navigation";
export default function Root({ children }: { children: React.ReactNode }) {
return (
<div>
<form
action={async () => {
"use server";
redirect("/login");
}}
>
<button>Go to login</button>
</form>
<p>Root Page</p>
</div>
);
}