NotionNext项目分析
type
status
date
slug
summary
tags
category
icon
password
😀
这里写文章的前言： 在Notion Next 项目中，我看到了一个完全标准的项目代码，无论是国际化，配置化，主题化，缓存等方方面面，规范得如同装饰品，艺术品。
 

📝 SSG相关

 
SSG 和 SSR 认识在原理，所以还是有很多基本可以看看的 :> 👹
Next的最最基础是这样： |- _document.js # 定义html骨架，可以做第三方脚本初始化 |- _app.js # 在页面初始化之前，可以做全局数据初始化 |- index.js # 首页页面 |- [folder] # 按照路由命名的页面们

isBrowser

因为SSG的可能会被服务端和客户端执行，项目很多方法是通过这个方法区分
 

_document.js 自定义整个html布局

 
 

_app.js插入自定义脚本,做全局数据初始化

notion image
加载外部资源封装方法
  • 检查资源是否已经存在 - 使用querySelectorAll匹配src和href方法
  • 在等待资源在加载完成在返回 - 监听对应脚本dom的onload和onerror方法
 

next.config.js todo 分析

页面们的细节

  • getStaticProps
      • 在SSG里面，每个页面都有getStaticProps方法，这是服务端执行的，是对应页面的props数据，这部分我们关注没有页面的这个方法做什么事情
       
  • Layout
      • 这里的每个页面都是通过getLayoutByTheme方法动态获取对应theme的Layout组件。
      在next.config.js定义了@theme-components是来自配置文件的主题Theme。
      在getLayoutByTheme方法做了个当前页面路径和主题export名称的映射。
      这里有个地方不解，为什么当theme不一样的时候要使用dynamic动态获取？ 难道是这里的操作是在客户端执行，@theme-components已经加载到了客户端，但是其他主题没有加载，还在服务端？
       
 

值得欣赏的细节

初始化协调界面和全局数据

  • 全局数据应该在界面之前初始化
  • 使用专门的全局数据组件GlobalContextProvider处理数据，如果全局数据多可以分拆出多个。最后在children里面加入初始化App入口组件
  • 全局数据包括：多语言、主题等
  • 导出对应的hook给children使用 - useGlobal
 

深拷贝对象

 
 

缓存

主题化

配置化

国际化

  • 语言从url query、cookie、navigator.language多重获取
  • 语言的字典匹配逻辑分成语言、地区细化
      • 将语言字符串拆分为语言和地区代码，例如将 "zh-CN" 拆分为 "zh" 和 "CN"
 
 

页面的路由和动态路由

 

dark theme

 

🤗 拓展

它不再是一个单一博客平台。通过二次开发打造出一个Studio。
是否可以改成不分享页面，通过notion api 实现获取
SSG 问题密码裸跑
每个post背景图片

📎 参考文章

  • 一些引用
  • 引用文章
 
💡
有关Notion安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~

© ittat 2016-2025