如何在 Next.js 13 应用程序路由器中将数据从服务器组件传递到客户端组件？

我正在 page.tsx 中调用外部 API，它给出了该人的城市。我想将这个城市传递给可以显示和更改该城市的客户端组件。实现这一目标的最佳方法是什么？在 React 中，我们可以使用 redux，但由于这是 next.js 13 服务器组件，不知道如何操作。

应用程序/page.tsx

const Page = async () => {
  const city = await getCity();

  const hotels = await getHotelsByCity({
    city: city,
  });

  return (
    <div className="pt-24 md:pt-28 flex md:flex-row md:flex-wrap flex-col">
      {hotels &&
        hotels.map((hotel) => {
          <div>{hotel}</div>;
        })}
    </div>
  );
};

export default Page;

应用程序/组件/导航栏/Location.tsx

"use client";

import useSelectLocationModal from "@/app/hooks/useSelectLocationModal";

export default function Location() {
  const selectLocationModal = useSelectLocationModal();

  return (
    <div
      className="flex items-center cursor-pointer"
      onClick={() …

我对 React JS 和 Next.js 相当陌生。我之前在 Next.js 中使用 Page Router API，但后来改用 Next.js 13 中的新 App Router。

以前，使用 Page Router 时，创建单个 GET 请求的结构是将“JS”文件嵌套在page\api. 服务器自动创建路由并返回方法+数据。例如，我将导出以下函数：

export default (req, res) => {
  res.statusCode = 200
  res.json({ name: 'John Doe' })
}

现在，在 Next.js 13 上使用 App Router 和 TS，我了解到机制是不同的。API 文件夹嵌套在 app 文件夹下，您必须使用所有不同的 GET、POST （等）方法定义一个“route.ts”文件：

import { NextApiRequest } from 'next';
import React from 'react';


export async function GET (request:NextApiRequest){
    return new Response('John Doe')
} 

我在理解如何使用这个Response对象时遇到一些问题。在我的例子中，如何指定返回内容的结构{ name: 'John Doe' …

我正在使用 Next.js 构建一个博客，并利用新的应用程序路由器进行导航。但是，我遇到一个问题，每个博客页面都显示相同的标题和描述。在研究代码后，我发现标题和描述从layout.js文件中导出为Metadata()，这似乎是问题的主要原因。当我尝试在各个博客页面中使用 Metadata() 时，它没有按预期工作。

有没有办法解决这个问题，并且每个博客页面都有不同的标题和描述，即使在使用应用程序路由器并包含非 SSR 页面（如客户端）时也是如此？对于如何解决此问题的任何指导或建议，我将不胜感激。

如何在 NextJS 13 应用路由器中使用 Redux 工具包？

这些是我与 redux 工具包相关的所有片段和代码，代码有什么问题吗，因为我在终端中收到此错误，说，我认为在 Nextjs 13 中，我们必须像我一样创建一个单独的提供程序，但我不知道错误请帮我找出错误：

apiSlice.js：

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

const baseQuery = fetchBaseQuery({
  baseUrl: "http://localhost:8000/",
  credentials: "include",
});

export const apiSlice = createApi({
  baseQuery,
  tagTypes: ["User"],
  endpoints: (builder) => ({}),
});

usersApiSlice.js：

import { apiSlice } from "./apiSlice";
const USERS_URL = "http://localhost:8000/api/users";

export const usersApiSlice = apiSlice.injectEndpoints({
  endpoints: (builder) => ({
    login: builder.mutation({
      query: (data) => ({
        url: `${USERS_URL}/auth`,
        method: "POST",
        body: data,
      }),
    }),
    register: builder.mutation({
      query: (data) …

\n

错误：不变：revalidateTag 中缺少静态生成存储

\n

revalidatePath(path);I\xe2\x80\x99ve在 a 中的应用程序路由器项目中使用'use client'，一个没有标头的组件，并且'use server'. 每次我得到

Error: Invariant: static generation store missing in revalidateTag_[hash-here]\n

使用下一个14.0.1

由于其高级功能，我最近从页面路由器过渡到应用程序路由器。然而，我遇到了一个困境，对SSR的实现和数据获取感到困惑。

问题：

文档建议，我们可以使用旧的 fetch 函数以及诸如“{cache: 'no-store'}”之类的附加参数来简单地获取数据，而不是使用 getServerSideProps() 或类似的方法。但是，我不确定如何创建一个通用辅助函数来获取可在所有页面上使用的 GraphQL 数据。

混乱：

Next.js 建议不要在组件内使用钩子，因为组件默认是 SSR。要利用挂钩，建议在组件中包含“使用客户端”。但是，如果我们的目标是以 SSR 的方式获取数据，然后将其存储在钩子中，那么由于在组件内使用了“use client”，获取的数据是否仍然保持其 SSR 特性？

如果您编写一个函数来以 SSR 的形式获取数据以及存储数据的钩子，那就更好了。非常感谢您的帮助。先感谢您。

这是我在上一页路由器的应用程序中使用的辅助函数。

<pre>
export async function storefront(params) {
    const response = await  fetch(process.env.NEXT_PUBLIC_API_URL, { 
       method: "POST",
       headers: {
       "Content-Type": "application/json",
       "Another-Property": "Something here", },
       body: JSON.stringify({ params }),
     });
    return response.json();
   }
</pre>

如何使用应用程序路由器将图像上传到 nextjs13 上的亚马逊 s3 存储桶？

我尝试使用 formidable 和 multer，但这两种解决方案都不起作用，因为 nextjs 更改了它们的 api 路由结构：

import { NextRequest, NextResponse } from "next/server";
import { v4 as uuid } from "uuid";
import multer from "multer";
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
import { IncomingForm } from "formidable";

const s3Client = new S3Client({
  region: process.env.REGION as string,
  credentials: {
    accessKeyId: process.env.ACCESS_KEY as string,
    secretAccessKey: process.env.SECRET_KEY as string,
  },
});

async function uploadImageToS3(
  file: Buffer,
  fileName: string
): Promise<string> {
  const params = { …

再会，

我一直在尝试使用应用程序路由器在下一个最新版本上设置 Clerk。

我已经阅读了写得很好的文档，而且设置起来似乎非常简单，所以我在我一直在从事的一个新项目上尝试了一下。

我已按照 CLerk 提供的入门说明进行操作，但没有成功：https://clerk.com/docs/nextjs/get-started-with-nextjs

我面临的问题是，一旦登录或注册获得授权，我就会被重定向到我按计划在 env.local 中设置的路由，但我开始无限循环 GET http://localhost:3000/ 401 (未经授权）错误。摆脱该循环的唯一方法是停止 Next 服务器或删除 Clerk 存储的本地存储文件

我虽然在初始设置中犯了错误，但每次我查看说明时，我都会一遍又一遍地面临同样的问题。

我还尝试在 Github clerkinc/clerk-next-app-router-starter 上运行 Clerk 提供的示例，但出现了相同的错误。我执行的唯一手动设置是在 .env.local 文件中添加 API 密钥和 Secret

-遵循 CLerk 提供的入门说明 -尝试多个浏览器 (Firefox/Chrome) -运行 clerkinc/clerk-next-app-router-starter 存储库示例 -创建另一个 Clerk 应用程序 9 个用户池）

如上所述，一切似乎都是根据官方文档设置的

我期待着利用一个身份验证产品来完成大部分繁重的工作。任何人都面临同样的问题，或者会推荐一条研究路径，因为我在这里失去了主意？

谢谢

当我构建下一个应用程序时出现错误（yarn run build）

我在那里尝试了新的干净项目。这是我的路线（/api/categories/route.ts）

export async function GET() {
  return new Response(JSON.stringify({ msg: "categories" }));
}

还有我的/page.tsx：

export default async function Home() {
  const res = await fetch("http://localhost:3000/api/categories");
  console.log(await res.json());

  return (
    <main>
      <h1>Home</h1>
    </main>
  );
}

当我运行开发应用程序（yarn run dev）时，我没有任何错误，但是当我尝试构建时，我收到此错误：

我还尝试从我在网络中找到的假数据 json api 获取数据，效果非常好。但是当我尝试使用我的 api 路由时出现错误。

我尝试更改网址，例如：/api/categories 和http://127.0.0.1/api/categories

我有什么办法可以解决这个问题吗？因为我想部署我的应用程序。

但是当我在项目中使用 prisma 并尝试从 page.tsx 中的 prisma 获取数据时，例如：prisma.categories.findMany(...)，我没有问题。但我希望代码是干净的，我有很多 findMay() 选项。所以也许你知道我如何在不使用 page.tsx 中的 prisma 的情况下解决这个问题

太长了；博士

Next.js 13 的/app路由器layout和page路由改变了我们向<head>. 如何向每个页面添加架构脚本？Next.js 会自动将<head>放置在任何layout或page中的标签编译为单个<head>.

目标

就像任何具有出色 SEO 的网站一样，我想在每个页面的头部包含一个架构脚本。

历史

通常，这就像这样简单地编写<head>：

<!-- index.html -->
<head>
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      // ... the rest
    }
  </script>
</head>

然后，Next.js/pages目录有点不同。我总是觉得必须使用该dangerouslySetInnerHTML属性很奇怪，但至少它有效。

// index.tsx
import Head from 'next/head'
export default function Page() {
  return (
    <Head>
      <script id="schema" type="application/ld+json" dangerouslySetInnerHTML={{__html: `
        {
          "@context": "https://schema.org",
          // ... the rest
        }
      `}} /> …