基础教程-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...