getStaticProps失效无输出，请求协助实现Todo列表展示功能

核心原因 #

你使用的是Next.js App Router（从page.module.css和文件目录结构可判断，App Router的页面文件默认在app/目录下且命名为page.js），而getStaticProps是Page Router（pages/目录）专属的数据获取方法，App Router不会识别并执行这个函数，这就是console.log无输出的根本原因。

修复步骤 #

1. 改用App Router的异步组件获取数据
   App Router的页面组件默认是Server Component，可直接在组件内部通过async/await获取数据，无需额外的getStaticProps方法。

2. 修复列表渲染逻辑
   原代码直接渲染todos数组对象会导致React报错，必须通过map遍历数组，渲染每个todo的具体内容，并为每个列表项添加唯一key。

修改后的完整代码 #

import React from 'react'
import styles from './page.module.css'

// 页面组件改为async函数
export default async function Todos() {
  // 直接在组件内获取数据
  const data = await fetch('https://jsonplaceholder.typicode.com/todos')
  const todos = await data.json();
  
  // 注意：此日志会输出在启动项目的终端窗口（服务器端），而非浏览器控制台
  console.log(todos);

  return (
    <>
        <h1>Todos</h1>
        <ul className={styles.todolist}>
            {/* 遍历数组渲染每个todo项 */}
            {todos.map(todo => (
              <li key={todo.id} className={styles.todoItem}>
                {todo.completed ? <s>{todo.title}</s> : todo.title}
              </li>
            ))}
        </ul>
    </>
  )
}

补充说明 #

• 若你确实需要使用Page Router（文件放在pages/目录下），则需确保文件路径为pages/todos.js，此时getStaticProps会正常执行，但仍需修复列表渲染的map遍历问题。
• Server Component中的console.log输出在服务器终端，而非浏览器控制台，若需在浏览器查看日志，可在客户端组件中添加（需用'use client'指令声明）。

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