Как получить путь к маршруту внутри приложения nextjs 13, используя последний каталог приложения? «Серверная сторона»

Question

Я использую экспериментальный appDir в Next.js 13 и хочу получить URL-адрес запроса. Мне нужна эта информация, чтобы установить параметры поиска, прежде чем я сделаю перенаправление. Я хочу получить путь запроса на стороне сервера.

Есть вопрос с похожим на этот. Как получить текущий путь в каталоге приложения с помощью Next 13?Однако это касается получения имени пути на стороне клиента.

Я попытался изучить параметр «Макет», и в нем есть реквизиты только для детей и параметров. Я не смогу восстановить URL с этой информацией. Я хотел бы знать, откуда приходит запрос на стороне сервера. Как я могу этого добиться?

Answer 1

В каталоге приложения Nextjs13 пока нет подходящего API для этого. Было бы здорово, если бы реквизит передалиsegment.

На данный момент вы можете использоватьchildren.props.childProp.segmentчтобы получить путь вашего маршрута на сервере.

Answer 2

Вероятно, вы захотите использоватьsearchParams

      export default function Page({ params, searchParams }) {

Answer 3

Вы можете передать параметры функции и получить доступ к динамическому маршруту. В этом случае я предполагаю, что ваш динамический маршрут — [id]

      export default function Page({params}) {
  return (
    <>
      <div className={styles.container}>
        <h1>Page for {params.id}</h1>
      </div>
    </>
  )
}

Answer 4

Я не полностью понимаю контекст «appDir» или «серверной стороны» в вашем вопросе, но вот несколько советов, которые могут помочь

1. Вы могли бы использоватьgetServerSidePropsиgetStaticPropsкоторый получит параметр при вызове. contextparam будет иметь переменные в пути, которые можно получить с помощьюcontext.params.myParamName. (например, страницы/статьи/[guid].tsx могут обрабатыватьсяcontext.params.guid)

      /* pages/articles/[slug].tsx */

export default function ArticlePage() {
  // ... render article page here
}

export async function getStaticProps(context: any) {
  const articleSlug = context.params.slug
  
  // ...fetch article here  

  return {
    props: {
      articleData
    }
  }
}

2. В качестве альтернативы, в коде на стороне клиента вы можете использоватьuseRouter()крюк. В случае чего можно получить полный доступ к пути, хосту и много другой полезной информации

      export default function MyComponent() {
    const router = useRouter()

    // "router.query.slug" works
}

Answer 5

Для этого вы можете использовать файл промежуточного программного обеспечения.

          // middleware.ts
    import { NextResponse } from 'next/server';
    
    export function middleware(request: Request) {
    
      // get the URL from request header
      const requestHeaders = new Headers(request.headers);
      requestHeaders.set('x-url', request.url);
    
      // pass the header to the layout
      return NextResponse.next({
        request: {
          headers: requestHeaders,
        }
      });
    }

Чтобы получить его в макете:

          // app/layout.tsx
    import { headers } from 'next/headers';
    
    export default function RootLayout() {
      const headersList = headers();
      // read the custom x-url header
      const header_url = headersList.get('x-url') || "";
    }

Предупреждение: это отключит генерацию на стороне сервера и запустит рендеринг на стороне сервера, поскольку такие функции, как cookie(), заголовки(), являются динамическими. Они также могут привести к промаху в кэше!

Ссылка: https://github.com/vercel/next.js/issues/43704#issuecomment-1411186664 .

Вы можете прочитать полную версию проблемы здесь: https://github.com/vercel/next.js/issues/43704.