likes
comments
collection
share

next.js入门及seo介绍

作者站长头像
站长
· 阅读数 69

写在前面

前面写了不少关于后端技术、运维相关的分享，今天我们来分来改个口味，也是很多朋友在咨询的一个框架。

简介

Next.js 是为了简化和优化基于 React 的应用开发流程，同时提供了高性能和 SEO 友好的解决方案。

另一个一直拿来作为比较的是Remix.js （remix.run/），至于他们之间的对比后面再分析。

Next.js资料：

官网：nextjs.org/

中文：www.nextjs.cn/

github地址：github.com/vercel/next…

学习文档：nextjs.org/docs

nextjs.frontendx.cn/

安装使用

创建Next.js应用

# 创建项目
 npx create-next-app@latest
 #也可以使用模版创建
npx create-next-app next-demo --use-npm --example "https://github.com/vercel/next-learn/tree/main"

# 进入项目目录
cd next-demo

#启动服务
npm run dev

其背后的工作是通过调用 create-next-app 工具完成的，该工具为你创建了一个 Next.js 应用程序。通过 --example 参数指定使用 此模板 。

next.js入门及seo介绍

将现有项目变为next.js

如果你已经有一个 React 项目，你可以通过安装以下几个包来将其转换为 Next.js 项目：

  • 安装 next、react 和 react-dom
npm install next react react-dom
# 或者
yarn add next react react-dom
  • 在 package.json 中添加几个脚本来启动 Next.js：
"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 目录结构说明

新建的项目结构如下：

next.js入门及seo介绍

新建的项目默认里面是不包含pages文件夹的，但是由于习惯的原因，我们还是会手动创建一个，下面是较全一点的说明：

next-demo/
|-- app/								# 应用路由器
    |-- page.js
|-- pages/							# 页面路由
|   |-- index.js        # 主页
|   |-- _app.js         # 可选的 App 组件，用于初始化页面
|   `-- 其他
|-- public/             # 静态文件放置目录，如图片、favicon 等
|-- styles/             # 样式文件目录
|-- node_modules/       # 项目依赖目录
|-- package.json        # 项目依赖和脚本配置文件
|-- next.config.js      # 可选的 Next.js 配置文件
|-- instrumentation.ts  # OpenTelemetry 和检测文件
|-- middleware.ts 			# Next.js 请求中间件
|-- .env 								# 环境变量
|-- .env.local 					# 本地环境变量
|-- .env.production 		# 生产环境变量
|--.env.development 		# 开发环境变量
|-- .eslintrc.json 			# ESLint 的配置文件
|-- .gitignore 					# Git 忽略的文件和文件夹
|-- next-env.d.ts 			# Next.js 的 TypeScript 声明文件
|-- tsconfig.json 			# TypeScript 的配置文件
|-- jsconfig.json 			# JavaScript 的配置文件
  • app/: Next.js 12 引入了一个新的路由系统，它提供了更灵活的路由定义方式，包括对路由组、布局、加载状态、错误处理和并行路由等的支持。
  • app/page.js app/page.js与pages/index.js只能存在一个
  • app/layout.js 是一个布局，可以被包含在多个页面中。
  • app/loading.js 定义了加载状态的 UI。
  • app/404.js 提供了一个404错误页面。
  • app/(users)/[id].js 创建了一个路由组。
  • pages/：pages 目录是 Next.js 最初提供的默认路由机制。在这个目录下，文件系统被用作路由器的基础，即每个文件（除了一些特殊的文件如 _app.js 或 _document.js）都会自动映射到一个 URL 路径上。

例如：

  • pages/index.js 映射到站点的根 URL (/)。也就是访问站点根 URL（如 http://localhost:3000/）时加载的页面
  • pages/about.js 映射到 /about。
  • pages/posts/[id].js 映射到一个动态路由，如 /posts/1。
  • pages/_app.tsx 或 pages/_app.js 这是 Next.js 中的一个特殊文件，它允许你初始化所有页面。你可以使用这个文件来保持页面布局，保持状态（如 Redux 或 MobX）时使用，或者用于全局 CSS 的插入。这个文件是可选的，如果你的应用不需要全局初始化，则不需要创建它
  • public/：用于存放静态资源，如图片、字体等，这些文件可以直接通过 / 路径在浏览器中访问。
  • styles/：保存 CSS 文件的地方，你可以根据需要组织你的样式文件。
  • node_modules/：存放所有安装的依赖包。
  • package.json：定义了项目的依赖和可运行的脚本。
  • next.config.js：可选的配置文件，用于自定义 Next.js 的高级配置，比如添加环境变量、修改构建的 Webpack 配置等。

关于路由：

Next.js 拥有两种不同的路由器：App Router 和 Pages Router。App Router 是一种较新的路由器，它允许你使用 React 的最新特性，例如服务器组件（Server Components）和流式传输（Streaming）。Pages Router 是原始的 Next.js 路由器，它允许你构建服务端渲染（Server-Rendered）的 React 应用程序，并且继续支持旧版本的 Next.js 应用程序。

Next.js 和 Remix.js在seo方面

Next.js

  • 多样的渲染模式提升SEO：Next.js 支持服务器端渲染（SSR）和静态站点生成（SSG），这对于SEO非常有利。SSR确保搜索引擎爬虫看到的是完全渲染的页面内容，有助于提高索引质量和排名。而SSG则可以预先生成静态HTML文件，进一步提升页面加载速度和SEO效果。此外，Next.js的增量静态生成（ISR）也是对SEO友好的特性，它允许在首次访问时动态生成缺少的静态页面，结合了静态和动态内容的优点。
  • 自动化路由和链接预取：Next.js 自动处理路由并支持链接预取，这有助于改善页面间的导航速度和用户体验，间接有利于SEO。

Remix

  • 服务器端渲染：虽然Remix主要聚焦于服务器端渲染，这对SEO也是有益的，因为它同样保证了搜索引擎爬虫能够获取到完整的HTML内容。不过，缺乏静态站点生成（SSG）这样的特性，可能在某些场景下不如Next.js那样能够提供即时加载的静态页面和最优的初次访问性能。
  • 更好的用户体验：根据之前的讨论，Remix在动态内容加载和错误处理方面做得很好，即使在网络状况不佳的情况下也能保持良好的用户体验。虽然用户体验不直接属于SEO范畴，但它对用户留存率、跳出率等间接影响SEO的因素有所贡献。

总结

这篇只是简单介绍了一下next.js基础，很多朋友比较关心他的seo。 但总的来说，Next.js由于其SSG功能，在生成静态内容和提升页面加载速度方面对于SEO来说可能更有优势。 然而，Remix通过出色的服务器端渲染和用户体验设计，也能很好地服务于SEO目的，尤其是在确保内容的可抓取性和可索引性方面。选择哪个框架还应基于项目具体需求、团队熟悉度以及是否需要特定的SEO优化策略。

参考资料：

mp.weixin.qq.com/s/0pZRVKS1O…

转载自:https://juejin.cn/post/7367175713894678580
评论
请登录