Redirection vers Next.js depuis / vers une autre page

Je suis nouveau dans Next.js et je me demande comment rediriger de la page de démarrage ( / ) vers / hello-nextjs par exemple. Une fois que l'utilisateur a chargé une page et après cela, déterminez si le chemin === / redirige vers / hello-nextjs

Dans react-router, nous faisons quelque chose comme:

<Switch>
  <Route path="/hello-nextjs" exact component={HelloNextjs} />
  <Redirect to="/hello-nextjs" /> // or <Route path="/" exact render={() => <Redirect to="/hello-nextjs" />} />
</Switch>

Dans next.jsvous pouvez rediriger après le chargement de la page en utilisant Routerex:

import Router from 'next/router'

componentDidMount(){
    const {pathname} = Router
    if(pathname == '/' ){
       Router.push('/hello-nextjs')
    }
}

Ou avec des crochets:

import React, { useEffect } from "react";
...
useEffect(() => {
   const {pathname} = Router
   if(pathname == '/' ){
       Router.push('/hello-nextjs')
   }
 });

Il existe trois approches.

1. rediriger les événements ou les fonctions:

import Router from 'next/router';

<button type="button" onClick={() => Router.push('/myroute')} />

2. rediriger avec des crochets:

import Router , {useRouter}  from 'next/router';

const router = useRouter()

<button type="button" onClick={() => router.push('/myroute')} />

3. rediriger avec Link:

basé sur les documents Nextjs, le <a>tag est nécessaire à l'intérieur du lien pour des choses comme ouvrir dans un nouvel onglet!

import Link from 'next/link';

<Link href="/myroute">
   <a>myroute</a>
</Link>

Il existe d'autres options pour le routage côté serveur asPath. dans toutes les approches décrites, vous pouvez ajouter asPath pour rediriger le côté client et le côté serveur.

La réponse de @ Nico résout le problème lorsque vous utilisez des classes.

Si vous utilisez une fonction que vous ne pouvez pas utiliser componentDidMount. Au lieu de cela, vous pouvez utiliser React Hooks useEffect.

import React, {useEffect} from 'react';

export default function App() {
  const classes = useStyles();

  useEffect(() => { 
    const {pathname} = Router
    if(pathname == '/' ){
      Router.push('/templates/mainpage1')
    }  
  }
  , []);
  return (
    null
  )
}

En 2019, React a introduit des crochets. qui sont beaucoup plus rapides et efficaces que les classes.

Exemple semi-officiel

Les with-cookie-authexemples redirigent vers getInitialProps. Je ne sais pas si c'est un modèle valide ou pas encore, mais voici le code:

Profile.getInitialProps = async ctx => {
  const { token } = nextCookie(ctx)
  const apiUrl = getHost(ctx.req) + '/api/profile'

  const redirectOnError = () =>
    typeof window !== 'undefined'
      ? Router.push('/login')
      : ctx.res.writeHead(302, { Location: '/login' }).end()

  try {
    const response = await fetch(apiUrl, {
      credentials: 'include',
      headers: {
        Authorization: JSON.stringify({ token }),
      },
    })

    if (response.ok) {
      const js = await response.json()
      console.log('js', js)
      return js
    } else {
      // https://github.com/developit/unfetch#caveats
      return await redirectOnError()
    }
  } catch (error) {
    // Implementation or Network error
    return redirectOnError()
  }
}

Il gère à la fois côté serveur et côté client. L' fetchappel est celui qui obtient réellement le jeton d'authentification, vous voudrez peut-être l'encapsuler dans une fonction distincte.

Ce que je conseillerais à la place

C'est le cas le plus courant. Vous souhaitez rediriger à ce stade pour éviter que la page initiale ne clignote lors du premier chargement.

MyApp.getInitialProps = async appContext => {
    const currentUser = await getCurrentUser(); // define this beforehand
    const appProps = await App.getInitialProps(appContext);
    // check that we are in SSR mode (NOT static and NOT client-side)
    if (typeof window === "undefined" && appContext.ctx.res.writeHead) {
      if (!currentUser && !isPublicRoute(appContext.router.pathname)) {
          appContext.ctx.res.writeHead(302, { Location: "/account/login" });
          appContext.ctx.res.end();
      }
    }
    return { ...appProps, currentUser };
  };

Il s'agit d'un remplacement pour le rendu côté client.

  componentDidMount() {
    const { currentUser, router } = this.props;
    if (!currentUser && !isPublicRoute(router.pathname)) {
      Router.push("/account/login");
    }
  }

Je ne pouvais pas éviter de flasher la page initiale en mode statique, ajoutez ce point, car vous ne pouvez pas rediriger pendant la construction statique, mais cela semble mieux que les approches habituelles. Je vais essayer d'éditer au fur et à mesure que je progresse.

L'exemple complet est ici

Problème pertinent, qui se termine malheureusement par une réponse du client uniquement

redirect-to.ts

import Router from "next/router";

export default function redirectTo(
  destination: any,
  { res, status }: any = {}
): void {
  if (res) {
    res.writeHead(status || 302, { Location: destination });
    res.end();
  } else if (destination[0] === "/" && destination[1] !== "/") {
    Router.push(destination);
  } else {
    window.location = destination;
  }
}

_app.tsx

import App, {AppContext} from 'next/app'
import Router from "next/router"
import React from 'react'
import redirectTo from "../utils/redirect-to"


export default class MyApp extends App {
  public static async getInitialProps({Component, ctx}: AppContext): Promise<{pageProps: {}}> {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    if (ctx.pathname === "" || ctx.pathname === "/_error") {
      redirectTo("/hello-next-js", { res: ctx.res, status: 301 }); <== Redirect-To
      return {pageProps};
    }

    return {pageProps};
  }

  render() {
    const {Component, pageProps} = this.props;
    return <Component {...pageProps}/>
  }
}

J'ai implémenté cette fonctionnalité dans mon Next.JSapplication en définissant une page racine qui fait la redirection côté serveur et côté client. Voici le code de la page racine:

import { useEffect } from "react";
import Router from "next/router";

const redirectTo = "/hello-nextjs";

const RootPage = () => {
  useEffect(() => Router.push(redirectTo));
  return null;
};
RootPage.getInitialProps = (ctx) => {
  if (ctx.req) {
    ctx.res.writeHead(302, { Location: redirectTo });
    ctx.res.end();
  }
};

export default RootPage;