Next.js Conf 2023：为 React 未来指明了方向Next.js Conf 2023：为 React

嗨，亲爱的前端开发者们，我是 nshen，好久没更新了！前几天的 Next.js Conf 2023 峰会汇聚行业中的很多大佬，带来了现场的 (Stage J) 和线上 (Stage S) 两场近10小时的前端技术的演讲，揭示了 Next.js 的最新趋势和创新方向。我刚把所有的视频撸了一遍，总体上来看现场的演讲质量都比较高，线下的 Stage S 由于限制了每个人只能讲10分钟左右，质量稍有参差不齐，但整体上还是非常值得一看。

众所周知 Next.js 是 React 官方主推的开发框架，也是目前唯一支持 React Server Component 的框架，React 生态的明星开发者很多都已经加入了其所在公司 Vercel。我觉得虽然不能说 Next 完全控制了 React，但从一定程度上来说 Next 就代表了 React 的未来。这也引来的很多争议，最大的吐槽就是PHP 回来了之类的言论，看这次大会怎么说服我们要把服务器端代码混合到客户端。

个人给演讲视频分了以下几类，简单做了些笔记，有兴趣的可以挑感兴趣的去看完整视频。

未来愿景类

愿景主要讲为什么要用 Next 14，React 为什么要搞 React Server Component，Server Action.. React 为什么应该要朝着 Server 端发展，用了 Next 会有什么好处。
技术分享类

这也是我最感兴趣的有代码的技术干货，主推
经验分享类

基本上就是我们家的项目用了 Next 以后怎么怎么好了，我觉得可以略看
Vercel 基础设施以及生态

可以了解一下国外这些基础云服务

未来愿景类

How Next.js is delivering React’s vision for the future

@samselikoff 开场第一个视频，拿乐高做比喻，解惑了为啥 React 越搞越像PHP ，为什么要把 Server 代码混到 client 端，非常推荐。

Taking the Next step

这是后边线上的演讲，看看 Ariel Shulman 如何说服 Boss 把项目转到 Next.js，获得了哪些好处。

performance

seo is hard

heavy lifting on the client side

lots of client code

slow build steps

SPA story, is bad

技术分享

Optimizing Third-Party Loading in Next.js

@hdjirdeh 介绍了如何高效的加载第三方脚本，与新的 @next/third-parties 包

Third-party resources have a significant negative impact on user experience.

Largest Contentful Paint is the time it takes to render the largest image or text block in the viewport.

A good LCP score is 2.5s or less

Interaction to Next Paint measures responsiveness by calculating all click, tap, and keyboard interaction latencies.

A good INP score is 200ms or less

Total Blocking Time after adding 10 popular third-party scripts, TBT increased 65x. from 35ms to 2269ms

Script component make it easier to load third-party scripts fast and effciently

import Script from "next/script";
<Script src="https://.../script.js" strategy="lazyOnload" />;

but what strategy should we use ?

import {
  GoogleTagManager,
  sendGTMEvent,
  YouTubeEmbed,
  GoogleMapsEmbed,
} from "@next/third-parties/google";

<GoogleTagManager gtmId="xxx" />;

Building Generative UI with Next.js

@jaredpalmer 介绍了Vercel AI SDK 相关的技术细节，看看 V0 中 ChatGPT 返回组件是怎么做到的

Vercel AI SDK
Server Action
vercel.com/ai
npm i ai

ChatGPt returns react component

return new exerimental_StreamingReactResponse(stream, {
  render({ content }) {
    return <div className="font-bold">{content}</div>;
  },
});

Performance in React and Next.js

@lydiahallie 介绍了 React 18 如何提升应用性能

Unlocking Composable Content with the App Router

@kapehe_ok 与 Grant Sander 介绍了 App Router

怎么在 app router 里嵌入 Sanity Studio
怎么在Server Component 里查 Sanity.io 的内容，并且缓存
webhook 调用 API route 里 revalidateTag 更新缓存

How to migrate 50,000 lines of code to React Server Components

@darius_cepulis 介绍了如何把老项目转成基于RSC 的详细步骤

Add 'use client' directive to the root of each page

Move the directive as low in the rendering tree as you can

If performance issues arise adopt advanced patterns

Unsupported libraries wrap in a "use client" component, because every thing imported by the client component is also a client component

How to use Server component inside Client component

because every thing imported by the client component is also a client component so you should never import Server Component in Client Component

pass as props <Client s={<Server/>} />

Half of component on the server and half on the client split in 3 files CodeBlock.server.tsx CodeBlock.client.tsx and index.tsx, server import client and index rexport server

优缺点

layouts, streaming, bundle size, the future of react
complexity

Elevating brands with Next.js

@razorbelle 介绍了一些 Next 14 的知识点

next/font

    import localFont from 'next/font/local'

    const feijoaDisplay = localFont({
        src: [
            {
                path: './fonts/feijoa-display.woff2',
                weight: '400',
                style: 'normal'
            },
        ],
        display: 'block', // block until loaded
        variable: '--feijoa-display'
    })

next/image

 <Image 
     ...
     priority 
     placeholder="blur"
     blurDataURL="data:mage/png;base64,xxx..."
 />
 //---------------

 import { getImgProps } from 'next/image'

Streaming UI and Scaling Full-Stack AI Like a Boss to Millions with Next.js

@MrAhmadAwais 介绍了ChatGPT 中的 Stream，并分享了他的 AI 组件库

Exploring the Power of React Server Components

@AdhithiRavi 非常详细的介绍了 RSC 组件

RSC and SSR: How it Fits

@tejaskumar_ 介绍了 React Server Component 原理

限于10分钟，作者的油管频道有更完整视频

www.youtube.com/watch?v=F83…

Using the App Router in Production

@kingnamedjohnny 介绍了一些 Next 14 的知识点

运行时生成og图片 app/api/OGImage.tsx
Metadata / generateMetadata function 指向生成的图片

The things Vercel won't show you

@t3dotgg 大佬介绍了一些奇怪的写法

cursed-next-patterns.t3.gg/

Pagination via Server Actions
globalThis as an SSR helper
function* for streaming component updates

Build Projects 10x Faster with Next.js

@hqasmei 分享了一些 Next 的技术细节

File based routes
Route Handlers app/api
Data Fetching

经验分享类

The Big Headless CMS Lie

@JamesMikrut 分享了从Express 到 Next 的 App Router 的经验

Building It Together: Next.js, BigCommerce & the Future of Performance in Ecommerce

介绍了些项目经验，还有 revalidateTag('cart') 用法

Elevating Developer Experience at the Speed of Sound

Jonathan Lemon 和 Greta Workman 讨论转到 Next 后有什么好处

Scaling an Open Source Learning Platform with Vercel

@trashh_dev 分享了 TypeHero 团队如何用next.js 和 vercel

server component

nested routes /challenge/2/comments/19 对应的文件结构

challenge
    [id]
        comments
            [commentId]
        solutions
            [solutionId]

Turborepo

Next.js is all you need for a fast-growing startup @miuki_miu

Xata 使用 nextjs 的经验，包括 DesignSystem SEO ContentLayer等等

Rebuilding a 1,000-page website with only one developer

@corydhmiler 一个人把wordpress项目转为Nextjs 的经验

Rapid Prototyping in Next.Js: Building a Viral AI Tool in 8 hours

Raunak 分享了 Remembrall 背后的技术

CRA to App Router in 5 Steps: A Case Study with Graphite

@k_dumez 分享了 CRA 到 next 的经验

vercel 基础设施以及生态

Executing on Inspiration with The Vercel Stack

@michellebakels 分享了一些 Vercel 的技术

Virtual Event Starter Kit
ImageResponse for og images

nextjs.org/docs/app/ap… opengrrraph-image.tsx
Web analytics
1. Enable Web Analytics in the Vercel Dashboard
2. npm i @vercel/analytics
3. add Analytics component to your app import { Analytics } from '@vercel/analytics/react'
v.track custom events
Image Gallery Starter
- Store images in Vercel Blob
- Store image blob URL's with image data in Vercel Postgres
- Build with Next.js
- Deploy on Vercel
V0 AI

Building an AI-powered SQL playground using Next.js, OpenAI, and Neon

@thisismahmoud_ 分享了

vercel ai sdk
chatbot
neon.tech

Make your Next.js app realtime and collaborative

@sylwiavargas 分享了实时边缘网络

Vercel's Edge Network.
PartyKit

Efficiency at scale with Next.js and Supabase

@jonmeyers_io 分享了一些supabase 与 next 相关技术

Beyond the Login Page: Authentication in Next.js

@devagrawal09 介绍了Clerk 登录组件

Improve your Next.js DevX with CDEs

@paulienuh 带了了云开发的介绍

Building Infinitely Scalable Applications

@alecchernicki 介绍了 TurboRepo

Automate All of Your Customer Emails with AI in Next.js

@jhooks 介绍了基于 Inngest 开发的自动 Email 系统

Scaling past 10K+ custom domains at Hashnode using Vercel Domain API

hashnode 如何利用vercel的服务自定义10k 多个域名