How to use error.tsx, not-found.tsx, loading.tsx files with NextJS 14
Unanswered
Giant Angora posted this in #help-forum
Giant AngoraOP
I am using Firebase for my backend, and all the Firebase code is employed on the client side. When I initiate login or signUp requests, I want my app to display a loader, which I intend to source from the default Next.js loading file. Similarly, in the event of an error from any source, including Firebase, I want the application to redirect to error.tsx. Additionally, I'd like to handle situations where a request is not found by redirecting to a not-found page.
24 Replies
you can read anything about the loading.js here: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming
you can read anything about the error.js here:
https://nextjs.org/docs/app/api-reference/file-conventions/error
https://nextjs.org/docs/app/api-reference/file-conventions/error
you can read anything about the page.js here (found.js):
https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts
https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts
@Giant Angora solved?
Giant AngoraOP
can we connect?
I am facing the same problem
Actually on hitting login button it will hit request to firebase login system there i want loader to appear till the process completes
@B33fb0n3
yea, let's chat here 🙂
Giant AngoraOP
I have described the problem
Giant AngoraOP
@B33fb0n3
export default function SignUp() {
const router = useRouter();
const { toast } = useToast();
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
email: "",
password: "",
confirmPassword: "",
},
});
const onSubmit: SubmitHandler<{
email: string;
password: string;
confirmPassword: string;
}> = async (values) => {
try {
const { email, password } = values;
const response = await createUserWithEmailAndPassword(email, password);
router.push("/createProfile");
} catch (error: any) {
toast({
title: error,
description: "Something went wrong",
variant: "destructive",
});
}
};
const handleGoogleSignUp = async () => {
try {
const isNewUser = await authenticateWithGoogle();
if (isNewUser) {
router.push("/createProfile");
} else {
router.push("/feed");
}
} catch (error: any) {
toast({
title: "Error",
description: "Something went wrong",
variant: "destructive",
});
}
};
return (
<CardComponent handleGoogleSignUp={handleGoogleSignUp}>
<SignUpForm form={form} onSubmit={onSubmit} />
</CardComponent>
);
}When I initiate login or signUp requests, I want my app to display a loaderYou can do this by using a useState hook like "loading" and set this one to true or false, whenever it's loading or not. When the user signUp and the requests are running, you can set the loading useState to true. Inside your button (the submit button) you can get the state and render the button. For example as a loading animation. Or the button get's disabled or whatever.
which I intend to source from the default Next.js loading file.If the page is loaded once on the client, the loading won't get active, when you start a request. You should do it like I here: https://nextjs-forum.com/post/1186956555921395804#message-1187473138905251901
event of an error from any source, including Firebase, I want the application to redirect to error.tsxYou can handle this by reading the response from firebase if there is any error. If so, you can throw it. Then error.tsx would get triggert.
I'd like to handle situations where a request is not foundYou can do the same like this: https://nextjs-forum.com/post/1186956555921395804#message-1187473205804421250
Giant AngoraOP
@B33fb0n3 I do the same using react context, the loader was used in layout.tsx but there was some error
Giant AngoraOP
also error.tsx is not hitting if there is any error from Firebase
how to you throw the error?
Giant AngoraOP
throw new Error("error-message")
@B33fb0n3
As I have checked eventHandlers are not able to trigger the errorBoundary in react