Lien Nextjs onClick : exemples de routage et de soumission de formulaires

Dans ce didacticiel, nous explorerons comment exploiter la puissance de la fonctionnalité Nextjs link onClick pour le routage programmatique. Nous aborderons divers scénarios, notamment la navigation par clic, la soumission de formulaires et l'optimisation des transitions de page. Les exemples sont fournis en JavaScript et TypeScript pour répondre aux différentes préférences des développeurs.

Table des matières

1. Utilisation du composant de lien Next.js
2. Routage simple basé sur un clic
3. Soumission et routage du formulaire
4. Implémentations TypeScript
5. Bonnes pratiques et optimisation

Utilisation du composant de lien Next.js

Next.js fournit un puissant composant Link du module next/link qui vous permet de créer des liens interactifs dans votre application. Ce composant permet la navigation entre les pages sans déclencher un rechargement complet de la page, ce qui est crucial pour maintenir une expérience utilisateur fluide dans une application monopage.

Le composant Link peut être combiné avec des événements onClick pour créer des expériences de navigation dynamiques et interactives. Voici un exemple de base de la façon dont vous pouvez utiliser le composant Link avec un événement onClick :

import Link from 'next/link';
import { useRouter } from 'next/router';

export default function NavigationExample() {
  const router = useRouter();

  const handleClick = (e) => {
    e.preventDefault();
    // Perform some action here
    console.log('Link clicked!');
    // Then navigate programmatically
    router.push('/about');
  };

  return (
    <Link href="/about">
      <a onClick={handleClick}>About</a>
    </Link>
  );
}

Dans cet exemple, nous utilisons à la fois le composant Link et le hook useRouter. Le composant Link fournit les capacités de routage côté client, tandis que le hook useRouter nous permet de naviguer par programme après avoir exécuté une logique personnalisée dans notre fonction handleClick.

Cette approche vous donne la flexibilité d'exécuter du code personnalisé avant la navigation, ce qui peut être utile dans divers scénarios tels que la validation de formulaire, la récupération de données ou les mises à jour d'état.

Approfondissons maintenant les cas d'utilisation plus spécifiques et les techniques avancées de gestion du routage avec les événements onClick dans Next.js.

Redirection Nextjs onClick

L'exemple suivant montre comment utiliser le hook useRouter pour gérer les événements de clic pour le routage :

import { useRouter } from 'next/router'

function ClickExample({ link }) {
  const router = useRouter()

  const handleClick = event => {
    event.preventDefault()
    router.push(link)
  }

  return (
    <a href={link} onClick={handleClick}>
      Handle Click
    </a>
  )
}

export default ClickExample

Dans cet exemple, nous utilisons router.push(link) pour accéder au lien spécifié. Cette méthode ajoute la nouvelle route à la pile historique du navigateur. Si vous ne souhaitez pas enregistrer l'URL dans l'historique, vous pouvez utiliser router.replace(link) à la place.

Redirection Nextjs onClick (TypeScript)

import { FC } from 'react'
import { useRouter } from 'next/router'

interface ClickExampleProps {
  link: string
}

const ClickExample: FC<ClickExampleProps> = ({ link }) => {
  const router = useRouter()

  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
    event.preventDefault()
    router.push(link)
  }

  return (
    <a href={link} onClick={handleClick}>
      Handle Click
    </a>
  )
}

export default ClickExample

Nous pouvons utiliser le hook useRouter pour gérer le routage des événements de clic.
Ici router.push(link) pousse le lien vers l'historique du routeur.
Si vous ne souhaitez pas que l'URL du lien soit enregistrée dans l'historique,
alors router.replace(link) peut être utilisé.

Exemple de formulaire de connexion Nextjs, redirection et prélecture

import { useCallback, useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import axios from 'axios'

export default function Login() {
  const router = useRouter()
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')

  const handleSubmit = async e => {
    e.preventDefault()

    console.log(username, password)

    if (username && password) {
      const options = {
        method: 'post',
        url: 'http://localhost:3000/login',
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
        },
        data: {
          username,
          password,
        },
      }
      const response = await axios(options)
      if (response.status == '200') {
        router.push('/home')
      }
    }
  }

  useEffect(() => {
    // Prefetch the home page for faster transition
    router.prefetch('/home')
  }, [])

  return (
    <form onSubmit={handleSubmit}>
      <input
        type='text'
        name='username'
        onChange={e => {
          setUsername(e.target.value)
        }}
      />
      <input
        type='password'
        name='password'
        onChange={e => {
          setPassword(e.target.value)
        }}
      />
      <button type='submit'>Login</button>
    </form>
  )
}

Exemple de formulaire de connexion Nextjs, redirection et prélecture (TypeScript)

import { useState, useEffect, FormEvent, ChangeEvent } from 'react'
import { useRouter } from 'next/router'
import axios from 'axios'

interface LoginResponse {
  status: number
  data: {
    token: string
  }
}

const Login = () => {
  const router = useRouter()
  const [username, setUsername] = useState<string>('')
  const [password, setPassword] = useState<string>('')

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault()

    if (username && password) {
      const options = {
        method: 'post',
        url: 'http://localhost:3000/login',
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
        },
        data: {
          username,
          password,
        },
      }

      try {
        const response = await axios(options)
        if (response.status === 200) {
          router.push('/home')
        }
      } catch (error) {
        console.error('Login failed:', error)
      }
    }
  }

  useEffect(() => {
    router.prefetch('/home')
  }, [router])

  const handleUsernameChange = (e: ChangeEvent<HTMLInputElement>) => {
    setUsername(e.target.value)
  }

  const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type='text' name='username' onChange={handleUsernameChange} />
      <input type='password' name='password' onChange={handlePasswordChange} />
      <button type='submit'>Login</button>
    </form>
  )
}

export default Login

Dans cet exemple simple de formulaire de connexion, nous pouvons voir comment utiliser le lien Nextjs onClick pour rediriger vers la page d'accueil après un appel API de connexion réussi.
router.push('/home') redirigera vers la page d'accueil, et de même, en cas d'échec, nous pourrions rediriger vers une page d'erreur.
Ici, router.prefetch('/home') pré-extrait la page d'accueil pour une transition plus rapide.
Une chose à noter est que comme useRouter est un hook, il ne peut être appelé que dans un composant fonctionnel.
La fonctionnalité Nextjs link onClick est démontrée grâce à l'utilisation de la méthode router.push(), qui permet une navigation programmatique basée sur les interactions des utilisateurs ou les soumissions de formulaires.

Meilleures pratiques et optimisation

Lorsque vous travaillez avec la fonctionnalité de lien onClick de Next.js, tenez compte des bonnes pratiques suivantes :

1. Utilisez router.push() dans la plupart des cas : Cette méthode ajoute le nouvel itinéraire à la pile historique du navigateur, permettant aux utilisateurs de revenir en arrière.

2. Utilisez router.replace() pour la connexion/déconnexion : Cela remplace l'entrée actuelle de l'historique, empêchant les utilisateurs de revenir à un état de déconnexion.

3. **Exploitez router.prefetch() : la prélecture peut améliorer considérablement les performances perçues en chargeant la page cible en arrière-plan.

4. Gérez les erreurs avec élégance : incluez toujours la gestion des erreurs dans votre logique de routage, en particulier lorsqu'il s'agit d'opérations asynchrones telles que les appels d'API.

5. Utilisez TypeScript pour une meilleure sécurité des types : TypeScript peut aider à détecter rapidement les erreurs potentielles et à améliorer la maintenabilité du code.

Voici un exemple intégrant ces bonnes pratiques :

import { useRouter } from 'next/router'
import { useState } from 'react'

const OptimizedNavigation = () => {
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)

  const handleNavigation = async (event: React.MouseEvent<HTMLAnchorElement>) => {
    event.preventDefault()
    setIsLoading(true)

    try {
      // Perform any necessary async operations here
      await someAsyncOperation()

      // Use replace for login/logout scenarios
      await router.replace('/dashboard')
    } catch (error) {
      console.error('Navigation failed:', error)
      // Handle error (e.g., show error message to user)
    } finally {
      setIsLoading(false)
    }
  }

  // Prefetch the dashboard page
  useEffect(() => {
    router.prefetch('/dashboard')
  }, [router])

  return (
    <a href="/dashboard" onClick={handleNavigation} aria-disabled={isLoading}>
      {isLoading ? 'Loading...' : 'Go to Dashboard'}
    </a>
  )
}

export default OptimizedNavigation

En suivant ces bonnes pratiques, vous pouvez créer des applications plus robustes et plus performantes à l'aide de la fonctionnalité Next.js link onClick.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!