使用JWT（JSON Web Token）进行身份验证是一种常见的方法，可以在Next.js应用程序中实现安全的用户身份认证。JWT是一种用于在网络应用程序之间传输信息的开放标准（RFC 7519），它使用JSON对象作为令牌的格式。在本文中，我们将探讨如何在Next.js应用程序中集成JWT身份验证，并提供一个简单的示例代码来演示其工作原理。

javascript
// pages/login.js
import { 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 handleLogin = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('/api/login', { username, password });
      const { token } = response.data;
      localStorage.setItem('token', token);
      router.push('/dashboard');
    } catch (error) {
      console.error(error);
    }
  };
  return (
    
              type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
              type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      Login
    
  );
}

javascript
// pages/dashboard.js
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import axios from 'axios';
export default function Dashboard() {
  const router = useRouter();
  useEffect(() => {
    const token = localStorage.getItem('token');
    if (!token) {
      router.push('/login');
      return;
    }
    const verifyToken = async () => {
      try {
        await axios.get('/api/verify', {
          headers: { Authorization: `Bearer ${token}` },
        });
      } catch (error) {
        console.error(error);
        router.push('/login');
      }
    };
    verifyToken();
  }, []);
  return 
Welcome to the Dashboard!
;
}