Redirects in server rendered components
Answered
SharpieMaster posted this in #help-forum
I am getting this error
⨯ Detected lowercase method 'get' in 'C:\Users\SaboD\OneDrive\Desktop\Spotify Clone\food-diary-next\src\app\account\route.tsx'. Export the uppercase 'GET' method name to fix this error.
⨯ No HTTP methods exported in 'C:\Users\SaboD\OneDrive\Desktop\Spotify Clone\food-diary-next\src\app\account\route.tsx'. Export a named export for each HTTP method.29 Replies
import { redirect } from "next/navigation";
import { getServerSession } from "next-auth";
const AccountPage = async () => {
const session = await getServerSession();
if (!session) {
redirect("/");
}
return <div>AccountPage</div>;
};
export default AccountPage;src\app\account\route.tsxyou need to export the method name in route.tsx
your code simply wont work if you write it like that
mhm...
how do I fix it?
@SharpieMaster how do I fix it?
depends. What do you want to do?
I want it to be a protected route,
to redirect the user if they are not logged in
to redirect the user if they are not logged in
What route are you trying to protect?
@SharpieMaster tsx
import { redirect } from "next/navigation";
import { getServerSession } from "next-auth";
const AccountPage = async () => {
const session = await getServerSession();
if (!session) {
redirect("/");
}
return <div>AccountPage</div>;
};
export default AccountPage;
This is not a valid route. Rename it to GET or POST or the other method name
import { redirect } from "next/navigation";
import { getServerSession } from "next-auth";
export const GET = async (request: Request) => {
const session = await getServerSession();
if (!session || !session.user) {
redirect("/");
}
return <div>AccountPage</div>;
};This results in another error:
⨯ Error: No response is returned from route handler 'C:\Users\SaboD\OneDrive\Desktop\Spotify Clone\food-diary-next\src\app\account\route.tsx'. Ensure you return a `Response` or a `NextResponse` in all branches of your handler.
at C:\Users\SaboD\OneDrive\Desktop\Spotify Clone\food-diary-next\node_modules\.pnpm\next@13.5.2_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:1:66960what are you trying to do?
protected route
if the user is not logged in, redirect them to the home page
if you want to return a component, use server component instead.
use
use
page.tsx and export a default functionand how would one go about using "server components"?
read the second sentence above
yes like that
rename route.tsx into page.tsx
Answer
i was doing api stuff and just got used to naming files route
my bad
its okay, im glad it worked out