コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

DDD
リリース： 2024-10-09 22:50:03
オリジナル
822 人が閲覧しました

Nextjs link onClick: Routing and Form Submission Examples

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

目次

  1. Next.js リンク コンポーネントの使用
  2. シンプルなクリックベースのルーティング
  3. フォームの送信とルーティング
  4. TypeScript の実装
  5. ベストプラクティスと最適化

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 機能を使用する場合は、次のベスト プラクティスを考慮してください。

  1. ほとんどの場合は router.push() を使用します: このメソッドはブラウザの履歴スタックに新しいルートを追加し、ユーザーが前に戻ることができるようにします。

  2. ログイン/ログアウトに router.replace() を使用します: これにより、現在の履歴エントリが置き換えられ、ユーザーがログアウト状態に戻ることができなくなります。

  3. **router.prefetch() を利用する: プリフェッチにより、ターゲット ページをバックグラウンドでロードすることにより、知覚されるパフォーマンスが大幅に向上します。

  4. エラーを適切に処理します: 特に API 呼び出しなどの非同期操作を処理する場合は、ルーティング ロジックに常にエラー処理を含めます。

  5. 型安全性を向上させるために 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 サイトの他の関連記事を参照してください。

ソース：dev.to
前の記事：Javascript インタビューの質問の説明 - オブジェクトのプロパティ 次の記事：[ ランダム ソフトウェア プロジェクト: dev.to フロントエンドの結論
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1898
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2065
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1738
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1641
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1652
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート