Next.js 開發技巧分享

在開發 Next.js 應用程式時，有一些技巧可以讓你的開發體驗更好，程式碼更優雅。

1. 使用 generateStaticParams

對於動態路由，使用 generateStaticParams 可以在建置時預先產生所有頁面：

export async function generateStaticParams() {
  const posts = getAllPosts();
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

這樣可以確保所有頁面都是靜態生成的，提升效能與 SEO。

2. Metadata API

使用 Next.js 的 Metadata API 來管理 SEO：

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = getPostBySlug(params.slug);
  return {
    title: post.title,
    description: post.description,
  };
}

3. 圖片優化

使用 Next.js 的 Image 元件來自動優化圖片：

import Image from 'next/image';

<Image
  src="/your-image.jpg"
  alt="描述"
  width={800}
  height={600}
/>

4. 環境變數

使用 .env.local 來管理環境變數：

NEXT_PUBLIC_API_URL=https://api.example.com

以 NEXT_PUBLIC_ 開頭的變數會暴露給瀏覽器端。

5. 錯誤處理

使用 error.tsx 和 not-found.tsx 來處理錯誤：

// app/error.tsx
'use client';

export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <div>
      <h2>發生錯誤！</h2>
      <button onClick={() => reset()}>重試</button>
    </div>
  );
}

這些技巧可以讓你的 Next.js 應用程式更加穩定和高效！