怎么给网站做自适应,硬件开发网站,中国菲律宾南海,做gif的网站Next.js官方文档地址
什么是 Next.js
这是一个用于生产环境的 React 框架。
Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验#xff1a;包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置。
功能#xff1a;
功能说…Next.js官方文档地址
什么是 Next.js
这是一个用于生产环境的 React 框架。
Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置。
功能
功能说明零配置自动编译并打包。从一开始就为生产环境而优化混合模式 SSG 和 SSR在一个项目中同时支持构建时预渲染页面SSG和请求时渲染页面SSR增量静态生成在构建之后以增量的方式添加并更新静态预渲染的页面支持 TypeScript自动配置并编译 TypeScript快速刷新快速、可靠的实时编辑体验已在 Facebook 级别的应用上规模上得到验证基于文件系统的路由每个 pages 目录下的组件都是一条路由API 路由创建 API 端点可选以提供后端功能内置支持 CSS使用 CSS 模块创建组件级的样式。内置对 Sass 的支持代码拆分和打包采用由 Google Chrome 小组创建的、并经过优化的打包和拆分算法
更多功能 支持 环境变量、 预览模式、 自定义 head 标签、 自动使用 polyfills 等等
项目创建
使用 pnpm 创建一个默认的 Next.js 应用代码如下
pnpx create-next-app nextjs-blog --use-pnpm接下来会有一些option操作可以根据自身需求来选择这里的选择如下 启动项目的时候需要注意一下当前 next 包用到的 node 版本。通过 node_modules/next/package.json 来查看一下如图 需要项目的 node 版本至少满足 next 包的 node 版本因此本项目使用 v18 的 Node.js可以通过 node -v 检查版本如图 项目运行
在项目创建的时候依赖已经安装好了所以直接运行即可。这里使用的是 pnpm当然可以用 npm 或者 yarn 工具。
cd nextjs-blogpnpm dev
# or
yarn dev
# or
npm run dev将在3000端口上启动 Next.js 应用程序在浏览器打开http://localhost:3000/可以看到demo成功运行如图 引擎锁定
在启动项目前检查过 Node.js 版本可以像 next 包一样通过 engines 字段指定工具的特定版本。
{name: nextjs-blog,version: 0.1.0,private: true,scripts: {dev: next dev,build: next build,start: next start,lint: next lint},dependencies: {react: ^18,react-dom: ^18,next: 14.0.1},devDependencies: {eslint: ^8,eslint-config-next: 14.0.1},engines: {node: 18.17.0}
}代码规范工具与格式化
为了设定一个标准供项目的所有贡献者使用以保持代码风格一致并遵循基本的最佳实践本项目将使用两个工具
Eslint - 代码规范工具Prettier - 代码格式化工具
ESLint
下载 ESLint 相关依赖
pnpm install eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react next/eslint-plugin-next -D依赖说明eslintESLint 核心库eslint-config-prettier关掉所有和 Prettier 冲突的 ESLint 的配置eslint-plugin-prettier将 Prettier 的 rules 以插件的形式加入到 ESLint 里面eslint-plugin-react为 React 使用 ESlint 的插件next/eslint-plugin-next为 Next 使用 ESlint 的插件
安装 Vscode 插件ESLint 配置 ESLint.eslintrc.json
{extends: next/core-web-vitals
}使用 ESLint
package.json 文件的 scripts 命令中 可以测试一下当前配置通过运行以下命令
pnpm lint会得到如图提示 Prettier
下载 prettier 相关依赖
pnpm install prettier -D安装 Vscode 插件Prettier 3. 配置 Prettier.prettierrc
.eslintrc.json
{extends: [next/core-web-vitals, prettier]
}.prettierrc
{tabWidth: 2,useTabs: false,semi: true,singleQuote: false,quoteProps: as-needed,jsxSingleQuote: false,trailingComma: none,bracketSpacing: true,bracketSameLine: false,arrowParens: avoid,requirePragma: false
}.prettierignore
/dist/*
.local
.next
/node_modules/****/*.svg
**/*.sh/public/*此文件是不希望 prettier 在这些目录中浪费任何资源去进行格式化也可以使用类似 *.html 这样的方式去忽略文件。
现在可以在 package.json 添加新的 script
