基础教程-NextJs是什么

category
tags
type
status
slug
summary
date
Last edited time
Sep 12, 2024 03:16 AM
icon
password
状态
天气
星期
日期

Next.js 是一个基于 React 的服务器端渲染框架,它提供了一些内置功能,帮助开发者更加容易地构建快速、可靠的应用程序。Next.js 旨在使 React 应用程序的构建过程更加简单,包括预渲染、服务端渲染、自动生成静态页面等特性。
 

Next.js 主要特性

1. 服务端渲染

Next.js 可以将组件在服务器端进行渲染,并将渲染后的 HTML 代码返回给浏览器,从而加速页面的初始加载速度。NotionNext项目通过在服务端抓取Notion数据,并在服务端生成好页面标签返回前端。

2. 静态页面生成

Next.js 可以自动生成静态页面,这对于需要 SEO 的页面来说非常有用。

3. 文件系统路由

Next.js 会根据 pages 目录下的文件结构自动生成路由规则,从而简化了路由配置的过程。NotionNext项目在/pages 路径下预先制定了博客常用的路由。并且通过 /themes/theme.js 文件,将路由映射到了themes主题目录下。

4. 自动代码拆分

Next.js 会根据页面的需要自动进行代码拆分,从而提高页面的加载速度。

5. CSS-in-JS

Next.js 内置了 styled-jsx,可以让开发者在组件内编写 CSS 样式。

6. 客户端路由

Next.js 提供了一个内置的路由组件,可以在客户端进行路由转换。
 

其他

在 Next.js 中,_app.js 文件是一个特殊的文件,它是所有页面的父组件。可以在这个文件中定义全局的样式和组件,以及自定义错误页面和页面的加载状态。

_app.js

这是NotionNext项目的 /pages/_app.js文件
Prev
基础教程-简单理解React和JSX
Next
基础教程-Tailwind CSS
Loading...
Article List
NotionNext-快速免费建站
✨ 更新日志
🚀 安装部署
✒ Notion教程
🛠 站点配置
⭐ 主题参数
📊 网站统计
📩 评论插件
🧷 外部扩展
⌨ 开发教程
🔊 运营教程
👨‍👦‍👦 获取帮助
💪 支持我们