“Next.js tsx 常見錯誤以及解決方式”

在使用 Next.js 和 TypeScript 開發時，你可能會遇到一些常見的錯誤。這些錯誤可能會讓你抓狂，但不用擔心，我們這篇文章會詳細介紹一些常見錯誤及其解決方式，讓你的開發過程更順利。準備好一起探討了嗎？Let’s go!

目錄

  1. 未定義的屬性錯誤
  2. 不兼容的類型
  3. 模塊未找到錯誤
  4. ESLint 規則違反
  5. Next.js 特定錯誤
  6. 範例代碼和解決方式

未定義的屬性錯誤

錯誤描述

在使用 TypeScript 開發時，常見的錯誤之一是未定義的屬性錯誤。例如：

const user: { name: string } = { name: "John" };
console.log(user.age); // Property 'age' does not exist on type '{ name: string; }'

解決方式

確保你訪問的屬性已在類型定義中聲明。如果需要新增屬性，更新類型定義：

interface User {
  name: string;
  age?: number;
}

const user: User = { name: "John", age: 30 };
console.log(user.age); // OK

不兼容的類型

錯誤描述

在 TypeScript 中，不同類型之間的賦值會導致不兼容錯誤。例如：

let count: number = 5;
count = "five"; // Type 'string' is not assignable to type 'number'.

解決方式

確保變量的賦值符合其聲明的類型。可以使用類型斷言來告訴 TypeScript 具體的類型：

let count: number = 5;
let countString: string = "five";

// 正確的用法
count = parseInt(countString); // OK

模塊未找到錯誤

錯誤描述

當模塊或文件路徑不正確時，會出現此錯誤。例如：

import { myFunction } from './utils'; // Module not found: Can't resolve './utils'

解決方式

確保文件路徑和模塊名稱正確無誤。使用相對路徑或絕對路徑：

import { myFunction } from '../utils'; // 確保路徑正確

ESLint 規則違反

錯誤描述

使用 ESLint 檢查代碼質量時，可能會遇到規則違反錯誤。例如：

const name = "John" // Missing semicolon  eslint(semi)

解決方式

按照 ESLint 規則修復代碼。如果不確定如何修復，可以參考官方文檔或修改 ESLint 配置文件：

const name = "John"; // 加上分號

Next.js 特定錯誤

錯誤描述

在 Next.js 中，某些錯誤與框架特定功能有關。例如，使用 <a> 標籤進行導航時：

<a href="/auth/signin">Back to Sign In</a> // Do not use an <a> element to navigate to /auth/signin/. Use <Link /> from next/link instead.

解決方式

在 Next.js 中，應該使用 next/link 的 <Link> 元件來實現客戶端導航：

import Link from 'next/link';

<Link href="/auth/signin">
    <a>Back to Sign In</a>
</Link>

範例代碼和解決方式

錯誤示範

import { useState } from 'react';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import Link from 'next/link';

export default function CreatePassword() {
    const [password, setPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');
    const { data: session } = useSession();
    const router = useRouter();

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

        if (password !== confirmPassword) {
            alert("Passwords do not match!");
            return;
        }

        const res = await fetch('/api/auth/create-password', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ password, email: session?.user?.email }),
        });

        if (res.ok) {
            router.push('/dashboard');
        } else {
            alert("Failed to set password");
        }
    };

    return (
        <div className="flex items-center justify-center min-h-screen bg-gray-100">
            <div className="w-full max-w-md bg-white p-8 rounded shadow">
                <div className="flex items-center justify-center mb-4">
                    <div className="bg-secondary text-white rounded-full p-2">
                        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 11c1.104 0 2 .896 2 2v4h2.5a1.5 1.5 0 010 3h-11a1.5 1.5 0 010-3H10v-4c0-1.104.896-2 2-2zm0-1V7a2 2 0 00-2-2H9a2 2 0 00-2 2v3a2 2 0 00-2 2v1h14v-1a2 2 0 00-2-2h-1a2 2 0 00-2-2z"></path>
                        </svg>
                    </div>
                </div>
                <h1 className="text-2xl font-bold text-center mb-6">Create Password</h1>
                <form onSubmit={handleSubmit} className="space-y-4">
                    <div>
                        <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
                        <input
                            type="password"
                            id="password"
                            name="password"
                            required
                            className="w-full px-3 py-2 border border-gray-300 rounded shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                        />
                    </div>
                    <div>
                        <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700">Confirm Password</label>
                        <input
                            type="password"
                            id="confirmPassword"
                            name="confirmPassword"
                            required
                            className="w-full px-3 py-2 border border-gray-300 rounded shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
                            value={confirmPassword}
                            onChange={(e) => setConfirmPassword(e.target.value)}
                        />
                    </div>
                    <button
                        type="submit"
                        className="w-full py-2 px-4 bg-primary text-white rounded shadow hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-primary"
                    >
                        Set Password
                    </button>
                    <div className="text-center mt-4">
                        <Link href="/auth/signin">
                            <a className="text-sm text-primary hover:underline">Back to Sign In</a>
                        </Link>
                    </div>
                </form>
            </div>
        </div>
    );
}

解決方式概述

在這篇文章中，我們探

討了幾個在 Next.js 和 TypeScript 開發中常見的錯誤及其解決方式。以下是一些關鍵點：

  1. 未定義的屬性錯誤：確保所有訪問的屬性都在類型定義中聲明。
  2. 不兼容的類型：確認變量的類型正確，必要時使用類型斷言。
  3. 模塊未找到錯誤：檢查文件路徑和模塊名稱的準確性。
  4. ESLint 規則違反：遵循 ESLint 規則或調整配置文件以滿足項目需求。
  5. Next.js 特定錯誤：使用 Next.js 提供的工具和方法進行導航和其他操作。

希望這篇文章能幫助你更好地理解和解決在 Next.js 和 TypeScript 開發中遇到的常見問題。Happy coding!