电器网站建设,怎么开一个网站平台,wordpress 改造,个人网站 备案 类型为什么使用nextJS
需求:
快速搭建宣传官网
1.适应pc、移动端
2.基本的路由跳转
3.页面渲染优化
4.宣传的图片、视频资源的加载优化
5.seo优化 全栈react web应用、
tailwind css原子工具的支持#xff0c;方便书写响应式ui
app router(React 服务器组件)支持服务器渲…为什么使用nextJS
需求:
快速搭建宣传官网
1.适应pc、移动端
2.基本的路由跳转
3.页面渲染优化
4.宣传的图片、视频资源的加载优化
5.seo优化 全栈react web应用、
tailwind css原子工具的支持方便书写响应式ui
app router(React 服务器组件)支持服务器渲染优化、code-spilit优化
next/image、next/video的优化支持
服务端渲染对seo友好 基础
介绍 | Next.js 中文网
构建全栈 Web 应用的 React 框架。可以使用 React Components 来构建用户界面并使用 Next.js 来实现附加功能和优化。
在底层Next.js 还抽象并自动配置 React 所需的工具例如打包、编译等。这使你可以专注于构建应用而不是花时间进行配置。
使用 Next.js 的脚手架工具 create-next-app 来快速创建一个新的 Next.js 项目。
npx create-next-applatest
create-next-app 提供了一些选项来定制你的 React 项目包括但不限于 使用 TypeScript 初始化项目 (--typescript 或 --ts)。初始化 JavaScript 项目 (--javascript 或 --js)。集成 Tailwind CSS (--tailwind)。初始化带有 ESLint 配置的项目 (--eslint)。使用 App Router (--app)。在 src/ 目录中初始化项目 (--src-dir)。启用 Turbopack (--turbo)。指定导入别名 (--import-alias)。初始化一个空项目 (--empty)。指定包管理器 (--use-npm, --use-yarn, --use-pnpm, --use-bun)。 路由 App Router
版本 13 中Next.js 引入了基于 React 服务器组件 构建的新 App Router
App Router 在名为 app 的新目录中工作。app 目录与 pages 目录一起工作以允许增量采用。这允许你将应用的某些路由选择为新行为同时将其他路由保留在 pages 目录中以实现以前的行为。App Router 的优先级高于 Pages Router。
在 next.config.js 中将 experimental.clientRouterFilter 设置为 false。禁用此功能后默认情况下页面中与应用路由重叠的任何动态路由将无法正确导航。
React 服务器组件允许你编写可以在服务器上渲染和选择性缓存的 UI。在 Next.js 中渲染工作被路由段进一步分割以实现流式渲染和部分渲染并且存在三种不同的服务器渲染策略 page router
默认情况下Next.js 使用服务器组件。这允许你自动实现服务器渲染无需额外配置并且你可以在需要时选择使用客户端组件
客户端组件允许你编写 在服务器上预渲染 的交互式 UI并且可以使用客户端 JavaScript 在浏览器中运行。 路由导航
Next.js 有四种在路由之间导航的方法 使用 Link 组件 使用 useRouter 钩 (客户端组件) 使用 redirect 功能 (服务器组件) 使用原生 历史 API API 路由
API 路由提供了使用 Next.js 构建公共 API 的解决方案。
文件夹 pages/api 内的任何文件都会映射到 /api/*并将被视为 API 端点而不是 page。它们只是服务器端打包包不会增加客户端打包包的大小。
