Ask How can I redirect a 404 error domain if fetching is not found?

[Brajet]

Im doing next js application in app router 14.1.4 , typescript and fetching news by params slug

if news not found, i want to redirect to 404 page.

how i do that ?

by the way this is the code and fetching news using axios. if news not found backend return 404.


"use client";
import { getNewsById } from "@/utils/data";
import NewsPage from "./NewsPage";
import { useEffect, useState } from "react";
import { News } from "@/utils/definitions";

export default function Page({ params }: { params: { slug: string } }) {
const [news, setNews] = useState<News | undefined>();
useEffect(() => {
const loadNews = async () => {
const fetchedNews = await getNewsById(parseInt(params.slug));
if (!fetchedNews) {
// TODO: if news not found, redirect to 404
}
setNews(fetchedNews);
};
loadNews();
}, [params.slug]);

return news && <NewsPage news={news} />;
}

 

[Anthony Joshua]

If a page shows a 404 error, you can set up a redirect to send visitors to a working page instead. The easiest way is to use a 301 redirect, which tells browsers and search engines that the page has permanently moved. On WordPress, you can use plugins like Redirection to manage 404 errors automatically. For other websites, editing the .htaccess file or using server rules can catch missing pages and redirect users to the homepage or a relevant page so they don't leave frustrated.

 

[Felix😎]

If fetching is not found for a 404 error domain, you can set up a 301 permanent redirect in your .htaccess file. This will allow you to redirect all 404 error pages to a centralized location, such as your website's main homepage or a custom 404 error page. The .htaccess file gives you the flexibility to handle these redirect rules without causing any loops or status code issues.

Alternatively, you could also explore using a server-level redirect, depending on the capabilities of your web host. This would allow you to set up the 301 redirects at the server level, which can be more efficient than handling it through your website's .htaccess file. The key is finding a solution that doesn't trigger any looping or status code problems while consolidating those 404 error pages.

 

[Dean101]

You have got a few easy ways to deal with it. The cleanest option is setting up a redirect on the server. A 301 redirect sends people permanently to a new page, while a 302 is more temporary. You can do this with stuff like .htaccess for Apache or an Nginx config. If you don't have server access, just make a custom 404 page that nudges users somewhere useful, or even auto-redirects after a few seconds with a bit of JavaScript.