如何在Next.js 14中利用URL路径名获取对应博客数据？

在Next.js 14的App Router中，动态路由（如app/articles/[slug]/page.tsx）的参数可以直接通过页面组件的props获取，无需依赖客户端组件的usePathname方法。以下是两种实现方案，优先推荐第一种（性能更优）：

方案一：使用Amplify条件查询（推荐） #

直接通过Amplify的list方法添加筛选条件，仅拉取匹配slug的文章，避免获取全部数据：

import type { Schema } from '@/amplify/data/resource';
import { generateClient } from 'aws-amplify/data';

const client = generateClient<Schema>();

// 接收动态路由参数
export default async function ArticlePage({ params }: { params: { slug: string } }) {
  const { slug } = params;

  // 仅查询slug匹配的文章
  const { data: posts, errors } = await client.models.Posts.list({
    filter: {
      slug: {
        eq: slug // 匹配路由中的slug值
      }
    }
  });

  // 处理加载错误
  if (errors) {
    return <div>加载文章失败：{errors.map(e => e.message).join(', ')}</div>;
  }

  // 取出匹配的文章（slug应唯一，取第一个即可）
  const post = posts[0];

  // 处理文章不存在的情况
  if (!post) {
    return <div>未找到该文章</div>;
  }

  return (
    <div>
      <h2>{post.title}</h2>
      <p>{new Date(post.createdAt).toLocaleDateString()}</p>
      <p>{post.content}</p>
    </div>
  );
}

方案二：获取全部文章后筛选（兼容原有逻辑） #

如果需要保留先拉取全部文章再筛选的逻辑，只需修改slug的获取方式：

import type { Schema } from '@/amplify/data/resource';
import { generateClient } from 'aws-amplify/data';

const client = generateClient<Schema>();

async function fetchPosts() {
  const { data: posts, errors } = await client.models.Posts.list();
  if (errors) throw new Error(errors.map(e => e.message).join(', '));
  return posts;
}

export default async function ArticlePage({ params }: { params: { slug: string } }) {
  const { slug } = params;
  const posts = await fetchPosts();
  const filteredPosts = posts.filter(post => post.slug === slug);

  if (filteredPosts.length === 0) {
    return <div>未找到该文章</div>;
  }

  return (
    <div>
      {filteredPosts.map(post => (
        <div key={post.id || post.createdAt}>
          <h2>{post.title}</h2>
          <p>{new Date(post.createdAt).toLocaleDateString()}</p>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

关键说明 #

• 动态路由参数获取：App Router的页面组件会自动接收params props，其中包含动态路由定义的参数（如[slug]对应的slug值），这是服务器组件的原生能力，无需额外客户端逻辑。
• 性能差异：方案一通过服务端筛选数据，比拉取全部数据后在客户端筛选更节省带宽，加载速度更快，适合文章数量较多的场景。
• 异常处理：添加了错误捕获和文章不存在的兜底逻辑，提升用户体验。

内容的提问来源于stack exchange，提问作者Corvo