技术分享
Nextjs入坑指南(一)
00 min
2024-6-23
2024-6-27
type
status
date
slug
summary
tags
category
icon
password
😀
在闲逛GitHub时，偶然发现了由tangly1024大佬开发的神仙模板NotionNext,尝试使用后对其实现方式产生好奇，于是，一个前端小白开始入坑 👁️。
GitHub - tangly1024/NotionNext: 使用 NextJS + Notion API 实现的，支持多种部署方案的静态博客，无需服务器、零门槛搭建网站，为Notion和所有创作者设计。 (A static blog built with NextJS and Notion API, supporting multiple deployment options. No server required, zero threshold to set up a website. Designed for Notion and all creators.)
使用 NextJS + Notion API 实现的，支持多种部署方案的静态博客，无需服务器、零门槛搭建网站，为Notion和所有创作者设计。 (A static blog built with NextJS and Notion API, supporting multiple deployment options. No server required, zero threshold t...
GitHub - tangly1024/NotionNext: 使用 NextJS + Notion API 实现的，支持多种部署方案的静态博客，无需服务器、零门槛搭建网站，为Notion和所有创作者设计。 (A static blog built with NextJS and Notion API, supporting multiple deployment options. No server required, zero threshold to set up a website. Designed for Notion and all creators.)
https://github.com/tangly1024/NotionNext
GitHub - tangly1024/NotionNext: 使用 NextJS + Notion API 实现的，支持多种部署方案的静态博客，无需服务器、零门槛搭建网站，为Notion和所有创作者设计。 (A static blog built with NextJS and Notion API, supporting multiple deployment options. No server required, zero threshold to set up a website. Designed for Notion and all creators.)
 

👣先决条件

  1. 文章或许需要对javaScript基本语法知识具有大体了解
  1. 安装Node.js version ≥ 18.17.0
  1. 有一个适合自己的编辑器（例如VSCode）

⛩️一、React与Next.js基本事项

Web应用程序的构建块

在构建Web应用时，我们一般考虑如下几个基本方面：
  1. 用户接口(User interface,UI):用户怎样与程序交互。
  1. 路由(Routing):用户如何导航到程序的不同部分。
路由（Routing）：构建现代Web应用的导航之道-阿里云开发者社区
在现代Web应用开发中，导航是至关重要的，用户需要能够浏览不同的页面和视图。而路由（Routing）是实现这种导航的关键概念，它允许开发人员在Web应用中定义不同的页面、视图和URL。在本博客中，我们将深入研究路由的概念、类型、工作原理，以及如何有效地使用路由来构建现代、多页面的Web应用。
路由（Routing）：构建现代Web应用的导航之道-阿里云开发者社区
https://developer.aliyun.com/article/1334014
路由（Routing）：构建现代Web应用的导航之道-阿里云开发者社区
  1. 数据获取(Data Fetching):数据存在的位置，数据如何获取。
  1. 渲染(Rendering):渲染动态或静态的内容。分为服务端渲染、客户端渲染、静态渲染等等。
在网页上呈现  |  Articles  |  web.dev
有关在应用中实现逻辑和渲染的建议。
在网页上呈现  |  Articles  |  web.dev
https://web.dev/articles/rendering-on-the-web?hl=zh-cn#rendering-terminology
  1. 集成(Integrations):应用中使用的第三方服务，如何连接并使用它们。
  1. 基础设施(infrastructure):部署、存储和运行应用程序代码（serverless、CDN、edge等）的位置。
  1. 性能(Performance):如何为最终用户优化应用程序。
  1. 可伸缩性(Scalability):应用程序如何随着团队、数据和流量的增长而进行调整。
  1. 开发者的经验(Developer Experience):开发者在构建和维护应用程序方面的经验。
对于应用程序的每个部分，要决定是自己构建解决方案还是使用其他工具（如包、库和框架）。

什么是React

React是一个由于构建交互式用户接口(UI)的JavaScript库,我们可以使用它提供的API构建UI。相对来讲，React对应用程序其他方面没有做主观假设，这使得它包括Next.js在内的第三方工具和解决方案的生态系统蓬勃发展。然而，这也意味着从头开始构建一个完整的 React 应用程序需要一些努力。开发人员需要花时间配置工具并重新设计解决方案，以满足常见的应用程序需求。

什么是Next.js

Next.js是一个React框架，它提供了创建Web应用程序的构建块(building block),这个框架具备了操作react需要的工具和配置，并为应用程序提供额外的结构、功能和优化。使用React构建UI，然后逐步采用Next.js功能来解决常见的应用程序需求，例如路由、数据获取和缓存。
notion image

🤠总结

  • React把关注的重心放在”Web应用程序的构建块“1.UI上。
  • Next.js扩展了React，也提供构建Web应用程序需要考虑的其他方面。
 
💡
有关React和Next.js安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~
上一篇
Nextjs入坑指南(三)
下一篇
Nextjs入坑指南(二)