NextJS -是否可以构建使用path或query参数的系统？

是的，Next.js 可以构建使用路径（path）或查询（query）参数的系统。Next.js 提供了强大的路由功能，支持动态路由和查询参数的处理。

路径参数（Path Parameters）

你可以使用动态路由来处理路径参数。例如，如果你想创建一个用户个人资料页面，可以使用以下方式：

在 pages 目录下创建一个 users 文件夹。
在 users 文件夹中创建一个 [id].js 文件。

// pages/users/[id].js
import { useRouter } from 'next/router';

const UserProfile = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>User Profile</h1>
      <p>User ID: {id}</p>
    </div>
  );
};

export default UserProfile;

这样，当你访问 /users/123 时，id 参数将被解析为 123。

查询参数（Query Parameters）

查询参数通常用于传递一些非关键信息，例如搜索条件或分页信息。Next.js 可以通过 useRouter 钩子来访问查询参数。

// pages/search.js
import { useRouter } from 'next/router';

const SearchPage = () => {
  const router = useRouter();
  const { query } = router.query;

  return (
    <div>
      <h1>Search Results</h1>
      <p>Search Query: {query}</p>
    </div>
  );
};

export default SearchPage;

这样，当你访问 /search?query=nextjs 时，query 参数将被解析为 nextjs。

示例

假设你想创建一个博客系统，其中文章可以通过路径参数和查询参数来访问：

创建一个 posts 文件夹。
在 posts 文件夹中创建一个 [slug].js 文件。

// pages/posts/[slug].js
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>Post</h1>
      <p>Slug: {slug}</p>
    </div>
  );
};

export default Post;

这样，你可以访问 /posts/my-first-post 来查看特定文章。

如果你还想通过查询参数来过滤文章，例如按标签过滤：

// pages/posts/[slug].js
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { slug } = router.query;
  const { tag } = router.query;

  return (
    <div>
      <h1>Post</h1>
      <p>Slug: {slug}</p>
      {tag && <p>Tag: {tag}</p>}
    </div>
  );
};

export default Post;

这样，你可以访问 /posts/my-first-post?tag=tech 来查看带有特定标签的文章。