Next.js 13.4.19中getServerSideProps返回undefined问题求助

核心问题分析 #

你遇到的三个问题存在直接关联：

1. getServerSideProps无效：Next.js 13的App Router（即app目录结构）不兼容Pages Router的getServerSideProps等数据获取API，你定义的该函数不会被执行，这是products始终为undefined的根本原因。
2. API路由404：App Router对API路由的目录结构有严格要求，你的文件位置不符合规范，导致接口无法访问。
3. 多渲染器冲突警告：在App Router中沿用Pages Router的_app.tsx包裹Redux Provider的方式已过时，触发了渲染机制冲突。

分步修复方案 #

1. 修正API路由结构 #

App Router要求API路由必须放在app/api/[路由名]/route.ts（或.js）路径下，你需要：

• 将app/api/products.ts移动并重命名为app/api/products/route.ts
• 修改代码适配App Router的API规范：

import { NextResponse } from 'next/server';
import { ProductProps } from '@/types';
import axios from 'axios';

export async function GET() {
  try {
    const response = await axios.get('http://localhost:5000/products');
    const products: ProductProps[] = response.data;

    return NextResponse.json(products);
  } catch (error) {
    console.error(error);
    return NextResponse.json({ error: 'Error fetching data' }, { status: 500 });
  }
}

说明：App Router的API路由使用GET/POST等导出函数替代原handler，用NextResponse替代res对象。

2. 替换页面数据获取逻辑（移除getServerSideProps） #

App Router中，服务端组件可直接在内部编写异步代码获取数据，无需依赖Pages Router的特殊API：

import Link from 'next/link'
import { BannerAds, BestSellers, GalleryItem, InputArrow, ProductCard } from '@/components'
import { ProductProps } from '@/types';
import axios from 'axios';

// 异步函数获取数据
async function fetchProducts() {
  // 服务端组件可直接请求json-server，无需经过自身API路由，减少网络开销
  const response = await axios.get('http://localhost:5000/products');
  return response.data as ProductProps[];
}

export default async function Home() {
  const products = await fetchProducts();
  console.log(products);

  return (
    <main>
      {/* 你的页面内容 */}
    </main>
  )
}

3. 修复Redux Provider配置（消除渲染警告） #

在App Router中，需通过专用的Providers组件配置Redux：

第一步：创建app/providers.tsx

'use client'; // 标记为客户端组件，Redux Provider需在客户端运行

import { Provider } from 'react-redux';
import store from '../store/store';

export function ReduxProvider({ children }: { children: React.ReactNode }) {
  return <Provider store={store}>{children}</Provider>;
}

第二步：创建/修改app/layout.tsx

如果没有该文件则新建，用Redux Provider包裹根布局：

import { ReduxProvider } from './providers';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <ReduxProvider>{children}</ReduxProvider>
      </body>
    </html>
  );
}

第三步：删除_app.tsx

App Router不再需要该文件，直接删除即可。

验证修复 #

1. 重启Next.js开发服务器
2. 访问localhost:3000/api/products，应正常返回产品数据
3. 查看首页控制台，products可正常打印，同时渲染冲突警告消失

内容的提问来源于stack exchange，提问作者Zahra Naseri