获取 URL 参数 (Next.js 13)

Question

我正在使用该目录构建 Next.js 13 项目/app。我有一个问题 - 在根布局中，我有一个永久的导航栏组件，该组件是从/components/Navbar.jsx. 基本上在 内部Navbar.jsx，我希望能够访问 url 中的 slug 参数，例如：localhost:3000/:slug我想要其中的 slug id。我已经为该 slug 定义了 Next.js 13 page.jsx。但是如何获取导航栏组件中的 slug id。我也不想使用，window.location.pathname因为当页面路由到不同的 slug 时它不会改变，并且仅在我刷新时才会改变。

我尝试过旧的 Next.js 12 方法：

//components/navbar.jsx;

import { useRouter } from "next/navigation";

export default function Navbar () {
  const router = useRouter();
  const { slug } = router.query;

  useEffect(() => {
    console.log(slug);
  }, []);

  return <p>Slug: {slug}</p>
}

然而它不起作用。

Answer 1

要获取Next.js 13中服务器组件中的 URL 参数，您可以使用searchParamsPage 函数的参数。

网址

localhost:3000/?slug

/app/page.js

export default function Page({searchParams}) {
   return <Navbar slug={searchParams}></Navbar>
}

导航栏.js

export default function Navbar(props) {
   return <p>Slug: {props.slug}</p>
}

更多信息：https ://beta.nextjs.org/docs/api-reference/file-conventions/page

Answer 2

参数有 3 种不同的变体

1. 参数 (/blog/1)
   • 单个参数
   • 多个参数
2. 搜索参数(/blog?postId=123)
   • 单个搜索参数
   • 多个搜索参数
3. params 和 searchParams(/blog/1?postId=123)

有多种方法可以处理这个问题

1. 对于参数 -useParams()

'use client'
 
import { useParams } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const params = useParams()
 
  // Route -> /shop/[tag]/[item]
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  console.log(params)
 
  return <></>
}

2. 对于搜索参数 -useSearchParams()

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function SearchBar() {
  const searchParams = useSearchParams()
 
  const search = searchParams.get('search')
 
  // URL -> `/dashboard?search=my-project`
  // `search` -> 'my-project'
  return <>Search: {search}</>
}

3. 参数和搜索参数都使用any类型

'use client'

export default function BlogPost(props: any) {

    // URL -> blog/a/b?param1=IamfirstParam&param2=IamsecondParam
    return <div>{props}</div>;

   // Output ->
   //{
   //  params: { blogId: [ 'a', 'b' ] },
   //  searchParams: { param1: 'IamfirstParam', param2: 'IamsecondParam' }
   //}
}

4. 参数和搜索参数都使用defined类型

'use client';

// URL -> blog/a/b?param1=IamfirstParam&param2=IamsecondParam

export default function BlogPost({
    params,
    searchParams,
}: {
    params: { blogId: string[] };
    searchParams: { param1: string; param2: string };
}) {


    return (
        <div>
            {params.blogId[0]}
            {params.blogId[1]}
            {searchParams.param1}
            {searchParams.param2}
        </div>
    );
}

有关动态参数的所有可能性，请参阅：如何使用 Next.js 13 进行动态路由？

另请参阅最新的 Next.js 13 代码模板 Next.js 13+ Power Snippets | TypeScript/Javascript

它包含广泛的代码片段，适用于ts和js. 在这里查找所有片段

Answer 3

另一种方法是使用钩子useSearchParams。

从文档中：

import { useSearchParams } from 'next/navigation';

export default function Page() {
  const searchParams = useSearchParams();

  // E.g. `/dashboard?page=2&order=asc`
  const page = searchParams.get('page');
  const order = searchParams.get('order');

  return (
    <div>
      <p>Page: {page}</p>
      <p>Order: {order}</p>
    </div>
  );
}

Answer 4

我不知道这个问题是否仍然相关，但您可以使用NextRequest包含的方法nextUrl.searchParams.get或者getAll它是否是一个数组。

import { NextResponse, NextRequest } from 'next/server';

export async function GET(request: NextRequest) {
  
  const queryParam = request.nextUrl.searchParams.get("queryParam");
  
  return NextResponse.json({ message: 'Query parameter value is ' + queryParam }, { status: 200 });
}

我在端点中使用了它，但对于页面也是如此，必须警告它NextRequest只能在服务器组件中使用，对于客户端组件，您需要useRouter使用'use client'.

Answer 5

为了在 Next.js 13 中使用 typescript 获取params服务器searchParams端组件，您应该定义您期望的 params 和 searchParams。例如：

// /app/category/[slug]/page.tsx
// Request URL localhost:3000/category/news?page=2

export default function PostsCategory({ params, searchParams }: { params: { slug: string }; searchParams: { page: string } }) {
  const posts = getPostsByTag(params.slug, ['title', 'date', 'excerpt', 'image', 'slug', 'tags']);
  const currentPage = searchParams && searchParams.page ? Number(searchParams.page) : 1;
  const { slug } = params;

  return (
    <main>
      <PaginatedPosts posts={posts} page={currentPage} title={`${slug}`} />
    </main>
  );
}

Answer 6

不得不使用usePathname

import { usePathname } from 'next/navigation';