5分钟入门 next13

next,入门 · 浏览次数 : 53

小编点评

**Next.js 13 大版本概述** * 支持新版本 `nextjs13`。 * 包含 `tailwindcss`、`ts`、`swr`、`ssr`、`ssr ` 和 `ssr` 组件库。 * 提升开发体验: * 打包速度更快。 * 文档更清晰。 * 错误信息提示更多友好。 **技术体系** * `tailwindcss`:前端框架,用于样式定义。 * `ts`:静态类型编译器,用于类型检查。 * `swr`:服务器渲染库,用于静态渲染页面。 * `ssr`: server-side rendering,用于将页面渲染到服务器。 * `ssr `:混合渲染库,支持 both SSR 和 SSG (Server-Side Rendering)。 **开发体验** * 快速入门:只需 5 分钟就能上手。 * 文档完善:官网文档非常详细。 **问题解决方案** * `globalThis` 是一个全局变量,在 `nextjs13` 中,它未定义。 * 可以通过以下方法解决问题: * 通过 `Script` 组件引入 `globalThis`。 * 在 `nextjs.config.js` 中配置环境变量 `NODE_ENV`。

正文

上半年vercel 推出了nextjs13 这个大版本,刚好最近有个c端的项目,所以就用了这个框架来写,技术体系基本也是文档提到的 tailwindcss + ts + swr + ssr ,总的来开发体验还可以,不管是打包速度、文档、错误信息提示目前都还满意,只不过目前nextjs13 中文资料有点少,不过问题也不大。

之所以只要5分钟就可以入门,是因为我觉得nextjs官网文档写的挺好的,我之前也没有用过nextjs,看文档之后,上手写东西也很快 https://nextjs.org/

文件路由系统

next13 使用文件约定路由,这样就不需要配置 path 与组件的之间的映射关系了。

每一层路由必须建一个文件夹,在该文件夹中建立 page.tsx 作为该路由主页面 如 域名是:http://baidu.com,页面路径是demo,文件结构如下

app
 demo
  page.tsx
  loyout.tsx 

比如在目前这个项目中没有授权的页面路径是 /noAuth ,对应的代码结构就是在跟目录下建一个noAuth 文件夹,文件夹中新建一个 page.tsx 即可即可。

通过上面,我们知道app 内文件夹会被当作路由结构来解析,如果要自己的文件夹,可以下划线开头的命名,如

通常我们会在这种文件夹中放一些业务组件或者公共组件。

app 路由模式

next13 默认是app 路由模式,这个模式下我们可以建立一些固定名称的组件,layouttemplatepage  [jx、jsx、ts、tsx],这些固定名称的组件有不一样的作用, page.tsx 就是我们该模块下的首页。

  • layout.tsx 该路由下的公共导航,切换路由时,不会刷新,类似模版页,page.txs 就是layout 页面中的 children
  • template.tsx 该路由下的公共部分,切换路由时,会刷新
  • page.tsx 该路由的主页面

layout.tsx 类似模版页,有了这个模版页面,我们可以很方便的编写统一的布局、样式,以及可以利用layout 嵌套来实现子模块个性的布局。

服务端组件

在Next13中,app目录下的组件默认都是服务端组件,在服务器中渲染好dom节点再返回到浏览器(默认没有交互)。

有了服务端组件,我们可以在React应用中用同一套React语法,混合使用服务端组件和客户端组件。

如果需要转换成客户端组件,只需要在文件的开头使用 use clinet 即可。

服务端组件几个比较特别的好处

  • 在服务端组件中发起请求,可以在请求返回HTML前,就完成数据的读取。相比原来JS应用从服务端传送JS资源到客户端,React完成渲染后再向服务端请求数据,大幅减少FCP(首次内容绘制时间)。
  • 有效减少传送到浏览器的JS包体积。
  • 传统SSR的各种优势(SEO友好,首屏渲染快)。

服务器和客户端组件可以组合在同一组件树中,并且他们可以混合使用,通常客户端组件最好在组件树中的叶子节点位置(有交互的组件)。

理论上在nextjs中,服务端、客户端组件应该像上面图那样来划分,外层容器、以及列表数据的获取用服务端组件交互部分小的组件用客户端组件,这样效率应该不错。

目前服务端组件、客户端组件数据同步的方式还不是太好,目前我只知道通过在服务端组件使用props 的方式。

如果可以做到在客户端组件通过什么东西直接拿,然后数据又是实时同步,类似在服务端组件、客户端组件都能拿到想要的数据状态,且数据保持一致。

服务端组件渲染策略:

  • 静态渲染
  • 动态渲染
  • 流式渲染

其他的也貌似没什么写的,还是多看看官方文档比较好 https://nextjs.org/docs 

遇到的问题

nest13 globalThis is not defined

解决方案:一开始我以为我安装了 globalthis 模块,然后在根 layout 中引入即可。信心满满的打包,部署,然后发现还是报错。

后面在github的issues 中发现要用Script 组件引入,然后我改成下面这种就可以了。

配置多个环境,打包不同的环境变量

我们部署的时候有测试环境,预生产、灰度、生产等多个环境,不同的环境,有些配置是不一样 如url、或者其他的配置。

一开始我看到文档说 NODE_ENV === development 环境,加载的是.env.development,同理 production 加载的是.env.production,那么我只要设置NODE_ENV 在不同环境下是不同的值即可。

但是经过测试,我发现 只要是 build 的命令,next的环境变量 NODE_ENV 一直都是production,覆盖不了,所以这种方式行不通,只能在增加一个环境变量来区分。

所以还是只能通过老办法,通过cross-env 传递变量,然后在 next 的配置文件中写入到nextjs 中,在通过 process.env.xx 使用即可。

"scripts": {
    "dev": " cross-env BUILD_ENV=test next dev -p 3001",
    "build:test": "cross-env BUILD_ENV=test next build",
    "build:pre": "cross-env BUILD_ENV=pre next build",
    "start": "next start -p 3001",
    "lint": "next lint"
  },
      
 // 配置文件中在写入
  env: {
    BUILD_ENV: process.env.BUILD_ENV || "test",
    buildTime: new Date().toLocaleString()
  },
      
 // 使用
  console.log("当前环境", process.env.NODE_ENV);
  console.log("环境变量:", process.env.BUILD_ENV);
  console.log("打包时间:", process.env.buildTime);

小结

  1. nextjs13 是一个全栈的开发框架、也提供了一些常用的组件
  2. 服务端组件、客户端组件混合使用、以及服务端组件渲染策略
  3. app 路由的 page、layout、loading 等固定的组件名称
  4. tailwindcss 、swr 还挺好用的

 

与5分钟入门 next13相似的内容:

5分钟入门 next13

上半年vercel 推出了nextjs13 这个大版本,刚好最近有个c端的项目,所以就用了这个框架来写,技术体系基本也是文档提到的 tailwindcss + ts + swr + ssr ,总的来开发体验还可以,不管是打包速度、文档、错误信息提示目前都还满意,只不过目前nextjs13 中文资料有

毕业季 | 程序员初入职场必备软件开发神器,华为云Astro带你开启新篇章

摘要:5分钟写出应用,10分钟开发大屏,新手程序员必学技能之华为云Astro,快来get。 本文分享自华为云社区《毕业季 | 程序员初入职场必备软件开发神器,华为云Astro带你开启新篇章》,作者:华为云社区精选 。 这一届初入IT职场的毕业生有多难? 既要在“最难”就业季里过关斩将,又要面对生成式

5步带你入门GaussDB(DWS)的GDS导入导出

摘要:本篇文档为使用GDS导入示例的具体简单步骤和示例。 本文分享自华为云社区《带你快速入门GDS导入导出,玩转PB级数仓GaussDB(DWS)》,作者: yd_220527686。 1、创建导入目标表 CREATE TABLE tpcds_reasons ( r_reason_sk intege

10.5 认识XEDParse汇编引擎

XEDParse 是一款开源的x86指令编码库,该库用于将MASM语法的汇编指令级转换为对等的机器码,并以XED格式输出,目前该库支持x86、x64平台下的汇编编码,XEDParse的特点是高效、准确、易于使用,它可以良好地处理各种类型的指令,从而更容易地确定一段程序的指令集。XEDParse库可以集成到许多不同的应用程序和工具中,因此被广泛应用于反汇编、逆向工程、漏洞分析和入侵检测等领域。XED

全球厂商之最,华为17篇论文入选国际数据库顶会ICDE

本文分享自华为云社区《全球厂商之最,华为GaussDB&GeminiDB,17篇论文入选国际数据库顶会ICDE》 ,作者:GaussDB 数据库。 5月13-17日,国际数据库顶级学术会议 ICDE 2024 于荷兰乌得勒支举行。华为GaussDB 和GeminiDB 17篇论文入选,成为全球论文入

.net入行三年的感想回顾

从21年毕业到现在,还差几天就三年了 工作后才知道,工作年限分为1年以下 、3~5年、5~10年、晋升老板,每段都有每段的故事和总结 回顾下我的前三年工作心路,思考下未来发展之路(emmm,我是觉得我是干不了一辈子程序员的 我的工作地点不在大城市,因为我爸不让我出去,家里也不是很缺钱,所以薪资不会辣

5分钟了解LangChain的路由链

路由链(RouterChain)是由LLM根据输入的Prompt去选择具体的某个链。路由链中一般会存在多个Prompt,Prompt结合LLM决定下一步选择哪个链。

5分钟理透LangChain的Chain

LangChain几乎是LLM应用开发的第一选择,它的野心也比较大,它致力于将自己打造成LLM应用开发的最大社区。而LangChain最核心的部分非 Chain 莫属。

5分钟带你了解RabbitMQ的(普通/镜像)集群

通过本文我们深入了解了RabbitMQ的集群模式及其优缺点。无论是普通集群还是镜像集群,都有其适用的场景和局限性。普通集群利用Erlang语言的集群能力,但消息可靠性和高可用性方面存在一定挑战;而镜像集群通过主动消息同步提高了消息的可靠性和高可用性,但可能会占用大量网络带宽。因此,在选择集群方案时,...

5分钟明白LangChain 的输出解析器和链

本文介绍 LangChain 的输出解析器OutputParser的使用,和基于LangChain的LCEL构建链。 1. 输出解析器OutputParser 1.1、为什么需要OutputParser 常规的使用LangChain构建LLM应用的流程是:Prompt 输入、调用LLM 、LLM输出