2024年最新基于React服务器端全站框架Next

进入my-app目录，启动框架开发；

在项目根目录下，可以使用以下命令启动开发服务器：

#启动开发
npm run dev

不出以外的话这个界面就出来了，http://localhost:3000/

4. 熟悉next框架目录结构

Next.js框架目录结构的详细介绍：

1. pages目录：这个目录用于存放所有的页面组件。Next.js框架将会根据pages中的组件自动生成路由，例如pages/about.js对应的路由为/about。
2. public目录：这个目录用于存放静态文件，例如图片、字体等等。这些文件可以在组件中使用。
3. components目录：这个目录用于存放各种可复用组件，例如按钮、表格等等。
4. utils目录：这个目录用于存放通用的工具函数和常量，例如通用的API请求函数、常量定义等等。
5. styles目录：这个目录用于存放全局的样式文件。在Next.js中，可以使用CSS模块化来避免样式泄漏的问题。
6. pages/api目录：这个目录用于存放API相关的组件，例如处理表单数据等等。这些组件可以在客户端和服务端同时使用。
7. .next目录：这个目录是Next.js框架编译后生成的目录，存放编译后的代码和一些临时文件。
8. package.json文件：这个文件用于管理项目的依赖和脚本。在Next.js中，一些内置的脚本例如dev、build、start可以用于开发、构建和启动项目。
9. 启用src目录后，app目录会放入src下

使用 src 目录和不使用 src 目录的区别在于文件的组织方式。在使用 src 目录时，开发者将所有源代码放置在 src 目录中，而不是将源代码和其他文件混合在一个顶级目录中。<