4. NextJs是什么

category
tags
type
status
slug
date
password
Last edited time
Jul 27, 2023 04:49 AM
summary
icon

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文件
3. 简单理解React和JSX5. Tailwind CSS
  • Twikoo
  • Giscus
  • Cusdis