###当然还可以安装指定版本 nvm install 18.17
###要查看可用版本 nvm list available
##查看已安装版本 nvm list installed
直接使用命令切换版本
直接使用最新版本
nvm use latest
使用指定版本
nvm use 16.13.2
## 2. 创建一个新的Next.js项目
官方建议直接使用create-next-app创建项目，最简单快捷。
可以使用以下命令在终端中创建一个新的Next.js项目：
npx create-next-app my-app
还有手动安装，喜欢折腾的来吧：
##创建文件夹并进入开发文件夹 mkdir my-app cd my-app
安装必要的组件
npm install next@latest react@latest react-dom@latest
修改package.json
{ "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" } }
## 3. 运行开发服务器
进入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` 目录中，而不是将源代码和其他文件混合在一个顶级目录中。
使用 `src` 目录的好处包括：
* 更干净和组织良好的文件结构
* 更容易区分哪些文件是源代码，哪些是其他文件
* 更容易在构建过程中忽略其他文件，只编译源代码
但是，使用 `src` 目录也会增加一定的复杂性，因为需要在配置文件中指定源码的路径。如果项目较小，不使用 `src` 目录也可以，但是在大型项目中，使用 `src` 目录可能会更好地组织和管理代码。
**默认大家都喜欢这个默认目录了，不过因为一般app都要分页，共用很多其他组件，如样式文件，页面独有组件，redux等，所以后面会调整目录，将单个的页面文件修改为文件夹，默认页面以index.js为入口，页面独有css文件以style为名等。详细见后面步骤**
## 5. 习惯整合styled-components（不喜欢的可以掠过）
Next.js和styled-components可以很容易地集成在一起。下面是详细的配置方法和代码。
### 1. 安装依赖：
npm install styled-components babel-plugin-styled-components
### 2. 在`.babelrc`中添加`styled-components`插件：
{ "presets": ["next/babel"], "plugins": [["styled-components", { "ssr": true }]] }
这将启用服务器端渲染并使用`styled-components`。
### 3. 创建`\_document.js`文件，这是一个Next.js的特殊文件，用于自定义html的渲染。
// _document.js 创建这个后next.js会先以这个_document.js为入口 import Document, { Html, Head, Main, NextScript } from 'next/document'; import { ServerStyleSheet } from 'styled-components';
class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage;
try { ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />), });
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} </> ), }; } finally { sheet.seal(); } }
render() { return (
); } }export default MyDocument;
这个文件用于收集所有的server-side渲染的样式，并将它们注入到html中。
### 4. 创建一个样式组件：
// Button.js 不过建议加上style做标记 import styled from 'styled-components';
const Button = styled.button` background-color: #4caf50; color: white; font-size: 20px; padding: 10px 20px; border: none; border-radius: 5px;
&:hover { background-color: #3e8e41; } `;
export default Button;
在上述代码中，我们创建了一个名为`Button`的styled-components组件。它将应用一些基本的CSS样式，并在鼠标悬停时变色。
### 5. 在组件中使用样式组件：
// home.js import Button from './Button';
const Home = () => { return (
