Next.js安装配置

本文总共 1654 字 · 阅读全文大约需要 5 分钟

Next_.js安装配置

简介

Next是基于React架构的全栈Web应用开发框架。你可以使用React组件来构建用户界面，并使用Next.js来实现附加功能和优化。在底层，Next抽象并自动配置React所需的工具，例如打包、编译等，这使你可以专注于构建应用，而不是花时间进行配置。Next.js主要包括的内容有： pad image

特性	描述
内置优化	为提高用户体验和Core Web Vitals性能指标针对图片，字体和脚本进行自动优化
动态的HTML流式处理	服务器端集成了路由和React Suspense组件功能，可以及时地流式UI响应
CSS支持	支持各种界面工具，包括CSS，Tailwind CSS，和各种常用的库
React Server组件	基于最新的React功能。
路由控制	构建API端点以安全地连接到第三方服务，以处理身份验证或侦听webhook。
中间件	控制传入的请求，使用代码定义身份验证、体验和国际化的路由和访问规则
数据获取	可使React组件异步等待数据。支持服务器以及
客户端的数据提取。
服务器操作	通过调用函数运行服务器代码，绕过API，在一次网络会话中轻松重新验证缓存数据并更新UI。
客户端和服务器渲染	灵活的呈现和缓存选项，包括每页级别的增量静态再生(ISR)。
高级路由和嵌套布局	使用文件系统创建布局，包括支持更高级的路由模式和UI布局。

安装

系统要求：Node.js 18.17或更高版本

自动安装。使用create-next-app启动一个Next.js应用，它会自动设置所有内容。

npx create-next-app@latest
安装时，你将看到如下提示:

What is your project named?my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

完成后，create-next-app将以你的项目名称创建一个文件夹并安装所需的依赖。

手动安装
npm install next@latest react@latest react-dom@latest
打开package.json文件并添加以下scripts:
```
{
 "scripts":{
     "dev":"next dev",
     "build":"next build",
     "start":"next start",
     "lint":"next lint"
 }
}
```
这些脚本涉及开发诮用的不同阶段：
- dev: 运行next dev以在开发模式下启动Next.js
- build: 运行next build 来构建用于生产的应用。
- start: 运行next start 来启动Next.js生产服务器。
- lint: 运行next lint 来设置Next.js的内置ESLint配置。
创建目录
Next.js使用文件系统路由，这意味着应用中的路由由你构建文件的方式决定。对于新应用，建议使用App路由。该路由允许你使用React的最新功能。可以创建public文件夹来存储静态资源，例如图片、字体等。然后可以从baseUrl(/)开始引用publib目录中的文件。 page.tsx或page.js是当前路由的默认入口，如果当前文件夹下没有page文件,那么这个文修的不会被列为浏览器的访问路由。

运行开发服务器

运行npm run dev以启动开发服务器。
访问http://localhost:3000查看你的应用。
编辑app/page.tsx文件并保存以在浏览器中查看更新的结果。

引用：Next.js — Getting started