用 Next.js 构建作品集的 5 个实用技巧

作品集网站是前端开发者最好的"活名片"。本文分享用 Next.js 构建作品集时的 5 个实用技巧。

1. 用 MDX 管理内容，摆脱 CMS 依赖

对于个人作品集，内容不会频繁更新，使用 next-mdx-remote 将 MDX 文件作为内容源是最简洁的选择：

import { MDXRemote } from 'next-mdx-remote/rsc'

export default async function Page({ params }) {
  const post = getPostBySlug(params.slug)
  return <MDXRemote source={post.content} />
}

好处是内容与代码在同一个 Git 仓库，版本控制更方便。

2. generateMetadata 做好 SEO

每个页面配置专属 meta 标签，让搜索引擎和社交分享都能正确展示：

export async function generateMetadata({ params }) {
  const post = getPostBySlug(params.slug)
  return {
    title: post.frontmatter.title,
    description: post.frontmatter.description,
    openGraph: {
      images: [post.frontmatter.cover],
    },
  }
}

3. generateStaticParams 实现静态生成

export async function generateStaticParams() {
  const projects = getAllProjects()
  return projects.map((p) => ({ slug: p.slug }))
}

所有项目详情页在构建时生成静态 HTML，加载速度极快。

4. 图片优化必须用 next/image

import Image from 'next/image'

<Image
  src={cover}
  alt={title}
  width={1200}
  height={630}
  className="object-cover"
  priority // 首屏图片加 priority
/>

自动 WebP 转换 + 懒加载，Lighthouse 图片得分轻松满分。

5. Framer Motion 做微交互，不要过度使用

动画的原则是"用户感知不到，但体验更好"。建议只在以下场景用动画：

• 页面/组件进入（fade + translateY）
• 卡片悬停（subtle scale）
• 列表项交错出现（staggerChildren）

避免过长的 duration 和花哨的路径动画——作品集是给招聘者/客户看的，他们的耐心有限。