你还不知道的20个Next.js新特性🚀🚀🚀

站长

2023年07月24日 11:43 · 阅读数 14

什么是Next.js

Next.js 是 Vercel 开发的开源 React 框架，一直是 Web 开发领域的游戏规则改变者。随着 Next.js 13 的发布，它实现了巨大的飞跃，引入了大量功能，使其成为开发人员更强大的工具。在这篇博文中，我将分享为什么您应该考虑使用 Next.js 13 并深入研究其 20 个最引人注目的功能。

为什么使用 Next.js 13？

1. 性能

Next.js 13 引入了新的编译器和基于 Rust 的服务器端渲染 (SSR)，可显着提高应用程序的性能。新的编译器速度提高了 5 倍，这意味着您的开发过程更加顺畅、更加高效。另一方面，基于 Rust 的 SSR 可将服务器响应时间缩短多达 60%，从而增强应用程序的性能。

2. 中间件

Next.js 13 中的中间件允许您在请求完成之前运行代码。这是一个强大的功能，可用于各种任务，例如处理 cookie、实施身份验证，甚至添加自定义标头。部署在 Vercel 上时，中间件在边缘运行，这意味着它非常快速且高效。

import { NextResponse } from 'next/server'

export function middleware(req) {
  return NextResponse.next().setHeader('X-Custom-Header', 'CustomValue')
}

3. 改进图像优化

Next.js 13 引入了 AVIF 图像格式支持，与其他格式相比，它提供了卓越的压缩效率。这意味着您的图像加载速度更快，消耗的带宽更少，从而提高应用程序的整体性能和用户体验。事实上，AVIF 图像通常比 JPEG 图像小 20%。

import Image from 'next/image'

export default function Avatar() {
  return <Image src="/me.avif" alt="me" width="64" height="64" />
}

4. 服务器组件的实时重新加载

Next.js 13 中我最喜欢的功能之一是服务器组件的实时重新加载功能。此功能允许您在修改服务器组件时实时查看更改，而无需刷新整个页面。这可以节省大量时间，并使开发过程变得更加愉快。

// Server component
'use client'
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

5. 并发特性

Next.js 13 引入了对 React 18 的实验性支持，包括并发功能。这意味着您现在可以使用诸如startTransition在繁重计算期间保持 UI 响应性等功能以及 React Server Components（它允许您在服务器上渲染组件并将它们作为 HTML 发送到客户端）等功能。

import { startTransition, Suspense } from 'react';

function ProfilePage() {
  const [resource, setResource] = useState(initialResource);

  function handleClick() {
    startTransition(() => {
      const nextResource = fetchProfileData(nextUserId);
      setResource(nextResource);
    });
  }

  return (
    <Suspense fallback={<h1>Loading profile...</h1>}>
      <ProfileDetails resource={resource} />
      <button onClick={handleClick}>Next</button>
    </Suspense>
  );
}

6. URL导入

Next.js 13 引入了对 ES 模块和 URL 导入的支持。这意味着您可以导入

直接从网络获取软件包，无需安装。此功能可以改变游戏规则，特别是对于原型设计或当您想快速尝试新库时。它可以将 node_modules 目录的大小减少多达 70%。

import confetti from 'https://cdn.skypack.dev/canvas-confetti';

confetti.create(document.getElementById('canvas'), {
  resize: true,
  useWorker: true,
})({ particleCount: 200, spread: 200 });

7. 流式编译

使用 Next.js 13，您的页面甚至在整个包被解析之前就开始渲染。这会缩短交互时间 (TTI)，特别是对于大型应用程序。这是一项重大改进，可以极大地增强用户体验。事实上，流式编译最多可以将 TTI 提高 20%。

8.React 服务器组件

Next.js 13 为 React Server 组件提供实验性支持。这些组件允许您以可以在服务器上呈现并以 HTML 形式发送到客户端的方式编写组件。这可以提高性能，因为需要发送到客户端的 JavaScript 更少。

// Server component
import fs from 'fs';
import path from 'path';

function Readme() {
  const text = fs.readFileSync(path.join(process.cwd(), 'README.md'), 'utf8');
  return <div>{text}</div>;
}

export default Readme;

9.Next.js 脚本

Next.js 脚本是 Next.js 13 中的一项新功能，允许您以提高性能的方式优化第三方脚本。支持lazy-onload、in-viewport、等加载策略priority。

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script src="https://www.google-analytics.com/analytics.js" strategy="lazy-onload" />
      {/* Your application code... */}
    </>
  )
}

10.Next.js 分析

Next.js 13 引入了强大的分析功能，可以提供有关应用程序性能的真实见解。它测量各种指标，包括最大内容绘制 (LCP)、首次输入延迟 (FID) 和累积布局偏移 (CLS)。

11. 改进的错误处理

Next.js 13 引入了改进的错误处理，提供更清晰、更可操作的错误消息。这可以显着加快调试过程并提高开发人员的工作效率。

12. 改进的 TypeScript 支持

Next.js 13 提供了改进的 TypeScript 支持，包括自动类型导入和更好的类型检查。这可以带来更健壮的代码和更少的运行时错误。

13.快速刷新

快速刷新是一项功能，可针对对 React 组件所做的编辑提供即时反馈。这就像具有实时重新加载功能，但它会维护组件的状态。

14. 国际化路由

Next.js 13 支持自动语言检测和国际化路由的 URL 前缀。这使得构建多语言网站变得更加容易。

module.exports = {
  i18n: {
    locales: ['en-US', 'fr', 'nl-NL'],
    defaultLocale: 'en-US',
  },
}

15.图像组件和自动图像优化

Next.js 13 包含一个内置图像组件，可以自动优化应用程序的图像加载。它支持多种图像格式，包括 AVIF、WebP 和 JPEG。

16. 零配置部署

借助 Next.js 13，您可以在 Vercel 上以零配置部署应用程序。这使得部署过程变得简单明了。

17. 环境变量支持

Next.js 13 支持以下环境变量

盒子。您可以定义可在整个应用程序中使用的特定于环境的变量。

// .env
NEXT_PUBLIC_ANALYTICS_ID=123456

18. 内置 CSS 和 Sass 支持

Next.js 13 内置了对 CSS 和 Sass 的支持，这意味着您可以直接在 JavaScript 文件中导入 CSS 文件。它还支持 CSS 模块，自动将 CSS 范围限定到各个组件。

// styles.css
.container {
  margin: auto;
  width: 50%;
}

// component.js
import '../styles.css'

function Component() {
  return <div className="container">Hello World</div>
}

19. 静态站点生成（SSG）

Next.js 13 支持静态站点生成 (SSG)，这意味着您可以在构建时预渲染页面。这对于内容较多的网站特别有用，因为它可以提高性能和搜索引擎优化。

export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
  }
}

20. API 路由

Next.js 13 允许您将 API 直接构建到 Next.js 应用程序中。您可以在该目录下创建Serverless函数，相当于独立的微服务/pages/api。

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ text: 'Hello' })
}