next.js getServerSideProps在客户端使用中间件时是未定义的

w51jfk4q 于 2023-06-22 发布在其他

关注(0)|答案(2)|浏览(91)

我尝试使用Nextjs中间件在每个页面上做重定向，如果某个条件为真。
由于某种原因，每当middleware.ts中的matcher匹配一个页面时，该页面上getServerSideProps中的所有props在到达客户端时都是undefined。当我从matcher正则表达式中删除页面时，它们会以正确的值正常工作。
Middleware.ts

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

export default async function middleware(req: NextRequest) {
  return NextResponse.next();
}

export const config = {
  matcher: ['/(tag|about)(.)*'],
};

如何确保getServerSideProps仍然在触发middleware函数的页面上触发？
（getServerSideProps正在触发，我在终端中看到了正确的值，但我仍然在客户端获得undefined）

next.js

来源：https://stackoverflow.com/questions/76403026/getserversideprops-props-are-undefined-on-client-side-when-using-middleware

2条答案

按热度按时间

inkz8wg91#

我试着复制这个。但对我来说很好。请将Next.js版本更新到最新版本。如果您使用的是app目录。getServerSideProps不是app目录。对于app目录，您可以在React Server组件中执行数据提取。
https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#data-fetching

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

ghhkc1vu2#

为了确保getServerSideProps仍然运行，并且在使用Next.js中间件时，props在客户端可用，您可以编辑中间件代码，如下所示：

import { NextResponse } from      'next/server';
    import { renderToString } from 'react-dom/server';
    import type { NextRequest } from 'next/server';

     export default async function     middleware(req: NextRequest) {
  const response = await     NextResponse.next();

  const renderedPage =    renderToString(response.component);
  const serializedProps =       JSON.stringify(response.props);

  response.headers.set('Content-Type',     'text/html');
  response.body =    response.body.replace('<div    id="__NEXT_DATA__"></div>',    `<script>window.__NEXT_DATA__ =            ${serializedProps};</script>`);

    return response;
    }

    export const config = {
    matcher: ['/(tag|about)(.)*'],
    };

修改后的代码拦截响应，序列化来自getServerSideProps的props，并将它们注入HTML，以便它们在客户端可用。
祝你好运

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

我来回答

next.js getServerSideProps在客户端使用中间件时是未定义的

2条答案

相关问题

热门标签

最新问答