next.js 在服务器组件上获取数据时遇到问题

hkmswyz6 于 2023-06-29 发布在其他

关注(0)|答案(1)|浏览(125)

我在尝试访问服务器组件上的路径名时遇到了一个问题，因为我需要获取路径名上的表单的ID，并且我希望它是一个服务器组件。有时代码工作，有时不工作。我在我的后端服务器上调试，当代码不起作用时，我没有收到ID。这是我在服务器组件上的代码：

import "./style.css";
import axios from "axios";
import FormSection from "./FormSection";
import { headers } from "next/headers";

const fetchForm = async (pathname) => {
  const id = pathname.split("/").pop();
  const res = await axios({
    method: "POST",
    url: `${process.env.NEXT_PUBLIC_FORM_ROUTES_INT_URL}/api`,
    data: {
      query: `...`,
      variables: {
        getFormId: id,
      },
    },
  });
  // Validation
  if (res.data.errors) {
    throw new Error(res.data.errors[0].message);
  }
  // Logic para redirecionar al id del form creado
  return res.data.data.getFormForSubmission;
};

export default async function CustomerFormPage() {
  const fullUrl = headers().get("referer") || "";
  const form = await fetchForm(fullUrl);
  return (
    <div className="h-100 row m-0" style={{ maxWidth: "100vw" }}>
      <div className="row mx-auto my-auto card-container col-sm-12 col-md-10 col-lg-10 col-xl-6">
        <div className="col-md-6 col-sm-12 p-5">
          <h3>{form.title}</h3>
          <p>{form.description}</p>
        </div>
        <div className="col-md-6 col-sm-12 p-5">
          <FormSection fields={form.inputs} />
        </div>
        <div className="poweredBy">
          <p>
            Powered by <a href="#">Form Lite</a>
          </p>
        </div>
      </div>
    </div>
  );
}

有时我们发送friendlyId到服务器，有时没有，所以我有一个错误的形式没有找到。
有人知道怎么修吗谢谢

next.js

来源：https://stackoverflow.com/questions/76525261/having-trouble-fetching-data-on-sever-components

1条答案

按热度按时间

13z8s7eq1#

我修复了创建中间件并将路径存储在cookie上的问题：
middleware.js:

import { NextResponse, NextRequest } from "next/server";
import { getToken } from 'next-auth/jwt';

export async function middleware(req) {
  const { pathname } = req.nextUrl;
  const token = await getToken({ req, secret: process.env.JWT_SECRET });

  if (!token && pathname != "/login" && !pathname != "/register" && !pathname.startsWith('/fms/')) {
    return NextResponse.redirect(new URL('/login', req.url))
  }

  if (req.nextUrl.pathname.startsWith('/fms/')) {
    const requestHeaders = new Headers(req.headers);
    requestHeaders.set('x-url', req.url);
    return NextResponse.next({
      request: {
        // Apply new request headers
        headers: requestHeaders,
      }
    });
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/forms/:path*", "/", "/help", "/settings/:path*", "/fms/:path*"],
};

然后获取服务器组件上的路径：

import { headers } from "next/headers";
const headersList = headers();
const headerUrl = headersList.get("x-url") || "";

希望我的回答能帮助到别人。

赞(0）回复(0）举报 2023-06-29

我来回答

next.js 在服务器组件上获取数据时遇到问题

1条答案

相关问题

热门标签

最新问答