Next.js+TailwindCSS项目缺少pages/api目录及相关文件的咨询

你遇到的核心问题是：当前使用的是Next.js 13+默认的App Router，而8个月前的教程基于旧版的Pages Router，两者目录结构和核心文件逻辑完全不同。以下是两种针对性解决方案：

方案一：切换回Pages Router（匹配教程结构） #

如果想完全沿用教程的代码和目录逻辑，可按以下操作：

• 若项目刚创建，重新初始化时指定Pages Router：

  npx create-next-app@latest your-project-name --typescript --tailwind --app false
  

• 若已有现有项目，修改next.config.js启用Pages Router：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    experimental: {
      appDir: false, // 关闭App Router，启用Pages Router
    },
  }
  
  module.exports = nextConfig
  

  然后手动在src目录下创建pages文件夹，添加核心文件：
  • _app.tsx（全局应用入口）：

    import '../styles/global.css'
    import type { AppProps } from 'next/app'
    
    export default function App({ Component, pageProps }: AppProps) {
      return <Component {...pageProps} />
    }
    

  • _document.tsx（HTML文档模板）：

    import { Html, Head, Main, NextScript } from 'next/document'
    
    export default function Document() {
      return (
        <Html lang="zh-CN">
          <Head />
          <body>
            <Main />
            <NextScript />
          </body>
        </Html>
      )
    }
    

  • index.tsx（首页）：

    export default function Home() {
      return <h1 className="text-2xl font-bold">首页内容</h1>
    }
    

方案二：适配App Router（官方推荐方向） #

App Router是Next.js官方主推的新架构，长期维护优先级更高，可按以下方式改造：

• 核心逻辑对应关系：app/page.tsx替代pages/index.tsx，app/layout.tsx整合了_app.tsx和_document.tsx的全局配置功能
• 调整全局样式和布局：在src/app/layout.tsx中导入global.css并配置基础模板：

  import './global.css'
  import type { Metadata } from 'next'
  
  export const metadata: Metadata = {
    title: '你的项目名称',
    description: '项目描述',
  }
  
  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode
  }) {
    return (
      <html lang="zh-CN">
        <body>{children}</body>
      </html>
    )
  }
  

• 改造原首页代码到src/app/page.tsx：注意App Router默认是Server Component，如需客户端交互（比如React状态、Tailwind交互类），需添加'use client'指令：

  // 如需客户端交互，顶部添加此行
  'use client'
  
  export default function Home() {
    return <h1 className="text-2xl font-bold hover:text-blue-600">App Router首页</h1>
  }
  

• API路由适配：在src/app/api下创建子目录，用route.ts定义接口，比如src/app/api/hello/route.ts：

  export async function GET() {
    return new Response(JSON.stringify({ message: 'Hello API' }), {
      headers: { 'Content-Type': 'application/json' },
    })
  }
  

内容的提问来源于stack exchange，提问作者Herdy Rostel Youlou