Tengo una sola página de destino, la aplicación nextJs es posible redirigir todo * a rutas específicas como lo hacemos en react-router como este, ¿cómo puedo hacer exactamente lo mismo en nextJs
<BrowserRouter> <Routes> <Route path={ROUTES.ROOT} element={<Registry />} /> <Route path={ROUTES.ALL} element={<Navigate to={ROUTES.ROOT} />} /> </Routes> </BrowserRouter> export const ROUTES = { ALL: '*', ROOT: '/registry', };lo que he hecho hasta ahora es que puedo redirigir una ruta específica a una ruta específica pero no puedo redirigir todas las rutas a una ruta específica
const nextConfig = { async redirects() { return [ { source: '/path', // not able to "*" the route destination: '/registry', // Matched parameters can be used in the destination permanent: false, }, ]; }, }; module.exports = nextConfig;Desafortunadamente, nextJs no parece tener una forma adecuada de manejar este tipo de redirección dentro de nextConfig, pero si desea redirigir cualquier página 404 a casa, lo que puede hacer es:
import { useEffect } from 'react' import { useRouter } from 'next/router' export default function Custom404() { const router = useRouter() useEffect(() => { router.replace('/') }) return null }Con eso, cualquier ruta no encontrada debería redirigir a la página de inicio. Ver esta discusión en github
editar: una última cosa, si desea manejar algún tipo de lógica cuando un usuario visita alguna ruta y redirigir si falla, puede hacerlo con getServerSideProps :
// Page where you want to handle the logic // data is the props that comes from getServerSideProps function Page({ data }) { // Render data... } // This gets called on every request export async function getServerSideProps() { // fetch some data from external API const res = await fetch(`https://someapi/fetchData`) const data = await res.json() if(!data) { // Here we redirect the user to home if get some error at the API return { redirect: { destination: '/', permanent: false } } } // Otherwise pass the data to Page as props return { props: { data } } } export default PageEs solo un ejemplo, pero entendiste la idea, si quieres aprender más sobre esto, lee los documentos aquí .