ホームページ > 記事 > ウェブフロントエンド > Nextjs link onClick: ルーティングとフォーム送信の例

Nextjs link onClick: ルーティングとフォーム送信の例

DDDオリジナル: 2024-10-09 22:50:03817ブラウズ

Nextjs link onClick: Routing and Form Submission Examples

このチュートリアルでは、Nextjs の link onClick 機能をプログラムによるルーティングに活用する方法を検討します。クリックベースのナビゲーション、フォームの送信、ページ遷移の最適化など、さまざまなシナリオを取り上げます。サンプルは、開発者のさまざまな設定に応えるために、JavaScript と TypeScript の両方で提供されています。

Next.js リンクコンポーネントの使用

Next.js は、アプリケーション内でインタラクティブなリンクを作成できるようにする next/link モジュールからの強力なリンクコンポーネントを提供します。このコンポーネントにより、ページ全体のリロードをトリガーせずにページ間のナビゲーションが可能になります。これは、単一ページアプリケーションでスムーズなユーザーエクスペリエンスを維持するために重要です。

Link コンポーネントを onClick イベントと組み合わせて、動的でインタラクティブなナビゲーションエクスペリエンスを作成できます。ここでは、onClick イベントで Link コンポーネントを使用する方法の基本的な例を示します:

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>
  );
}

この例では、Link コンポーネントと useRouter フックの両方を使用しています。 Link コンポーネントはクライアント側のルーティング機能を提供しますが、useRouter フックを使用すると、handleClick 関数でカスタムロジックを実行した後にプログラムでナビゲートできるようになります。

このアプローチにより、ナビゲーションが発生する前にカスタムコードを実行できる柔軟性が得られ、フォーム検証、データの取得、状態の更新などのさまざまなシナリオに役立ちます。

ここで、Next.js で onClick イベントを使用したルーティングを処理するための、より具体的なユースケースと高度なテクニックを詳しく見ていきましょう。

Nextjs onClick リダイレクト

次の例は、useRouter フックを使用してルーティングのクリックイベントを処理する方法を示しています。

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

この例では、router.push(link) を使用して、指定されたリンクに移動します。このメソッドは、新しいルートをブラウザの履歴スタックに追加します。 URL を履歴に保存したくない場合は、代わりに router.replace(link) を使用できます。

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

useRouter フックを利用してクリックイベントのルーティングを処理できます。
ここで、router.push(link) はリンクをルーター history.
にプッシュします。リンク URL を履歴に保存したくない場合は、
そうすれば、router.replace(link) を使用できます。

Nextjs ログインフォームのリダイレクトとプリフェッチの例

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>
  )
}

Nextjs ログインフォームのリダイレクトとプリフェッチの例 (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

この単純なログインフォームの例では、ログイン API 呼び出しが成功した後に Nextjs リンク onClick を使用してホームページにリダイレクトする方法を確認できます。
router.push('/home') はホームページにリダイレクトします。同様に、失敗した場合はエラーページにリダイレクトできます。
ここで、router.prefetch('/home') は、移行を高速化するためにホームページをプリフェッチします。
注意すべき点の 1 つは、useRouter はフックであるため、機能コンポーネント内でのみ呼び出すことができるということです。
Nextjs リンクの onClick 機能は、router.push() メソッドを使用して実証されます。これにより、ユーザーの操作やフォームの送信に基づいたプログラムによるナビゲーションが可能になります。

ベストプラクティスと最適化

Next.js リンクの onClick 機能を使用する場合は、次のベストプラクティスを考慮してください。

ほとんどの場合は router.push() を使用します: このメソッドはブラウザの履歴スタックに新しいルートを追加し、ユーザーが前に戻ることができるようにします。
ログイン/ログアウトに router.replace() を使用します: これにより、現在の履歴エントリが置き換えられ、ユーザーがログアウト状態に戻ることができなくなります。
**router.prefetch() を利用する: プリフェッチにより、ターゲットページをバックグラウンドでロードすることにより、知覚されるパフォーマンスが大幅に向上します。
エラーを適切に処理します: 特に API 呼び出しなどの非同期操作を処理する場合は、ルーティングロジックに常にエラー処理を含めます。
型安全性を向上させるために TypeScript を使用します: TypeScript は、潜在的なエラーを早期に検出し、コードの保守性を向上させるのに役立ちます。

これらのベストプラクティスを組み込んだ例を次に示します。

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

これらのベストプラクティスに従うことで、Next.js のリンク onClick 機能を使用して、より堅牢でパフォーマンスの高いアプリケーションを作成できます。

以上がNextjs link onClick: ルーティングとフォーム送信の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript typescript if for while include catch Error using Event JS function this history background transition table router

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Javascript インタビューの質問の説明 - オブジェクトのプロパティ次の記事：Javascript インタビューの質問の説明 - オブジェクトのプロパティ

続きを見る