在VS Code中创建Next.js应用缺少Pages/Styles文件夹求助

你碰到的是Next.js版本迭代带来的结构差异：Next.js 13+默认启用App Router（对应app目录），而你在官网看到的pages、styles文件夹属于旧版Pages Router的项目结构。

解决办法： #

1. 创建时指定Pages Router
   重新执行npx create-next-app@latest，在交互步骤中遇到Would you like to use App Router? (recommended)时，选择No。创建完成后，项目就会生成pages和styles文件夹，和官网展示的示例结构一致。

2. 手动在现有项目中搭建Pages Router结构
   若不想重新创建项目，可手动在根目录添加对应文件夹及文件：

   • 新建pages/index.js（或.tsx，取决于你选择的开发语言），写入基础页面代码：

     export default function Home() {
       return <h1>Hello World</h1>;
     }
     

   • 新建styles/globals.css和styles/Home.module.css，补充样式代码即可。
     这种方式需要手动处理路由和样式关联，适合后续熟悉Next.js后尝试。

额外说明： #

App Router是Next.js的新特性，官网会同时展示两种路由模式的示例。作为新手，建议先从Pages Router开始学习，入门门槛更低，多数基础教程也基于该结构。

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