【Next.js 入门教程系列】09-优化技巧

于 2024-10-12 09:43:55 发布
阅读量279 收藏 7
点赞数 3
分类专栏： Next.js React 文章标签： react typescript web Next.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54869075/article/details/142869711
版权

原文链接

CSDN 的排版/样式可能有问题，去我的博客查看原文系列吧，觉得有用的话， 给我的库点个star，关注一下吧

上一篇【Next.js 入门教程系列】08-发送邮件

优化技巧

本篇包括以下内容:

  • Optimizing images
  • Using third-party JS libraries
  • Using custom fonts
  • Search engine optimizaion
  • Lazy loading

优化 image​

本章代码链接

在 Next.js 中需要加载静态图片时，可以使用 next/image 中的 Image 组件。其导入的图片也是以对象的形式 import 进来。同样也可以使用 url 的形式获取网络资源。在 Nextjs Image 页面可以看到它的更多用法

import Image from "next/image";
import RDR2 from "@/public/RDR2.png";

export default async function Home() {
  const session = await getServerSession(authOptions);
  return (
    <>
      ...
      <Image src={RDR2} alt="An image of RDR2" />
      <Image src="https://bit.ly/react-cover" alt="React cover" />
      ...
    </>
  );
}

如果想要使用 url 的形式获取网络资源，出于安全原因，需要先在 next.config.js 中添加对应的域名才可以正常获取。添加好后需要重新运行项目就可以正常获取网络资源了

/** next.config.js*/

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "bit.ly",
      },
    ],
  },
};

module.exports = nextConfig;

使用 <Image> 标签的好处是，可以将图片转为 webp 格式，极大的减少 Size，比如这张图原图大小为 2.08MB，可以看到实际上网页里的只有 28.1KB

Image Size

使用第三方脚本​

在使用第三方 js 脚本的时候，我们可以将其封装为一个 component，然后在对应的 layout.tsx 中直接使用即可。注意应使用 Next 的 <Script> 标签。若有识别不出 js 语法的问题，可以用 {``} 将 js 代码包裹起来

字体​

本章代码链接

网络字体​

想要使用其他的官方字体，我们只需要在 layout.tsx 中从 "next/font" 中导入，并在对应标签的 className 中设置即可。比如下面就是使用 Roboto 字体的演示。在Google Fonts这里可以找到各种 Google 字体。在使用这种官方字体库时，仅在第一次使用时会去下载这个字体文件，后面会一直使用下载好的文件，不必担心由于网络问题导致字体出错

# layout.tsx

import "./globals.css";
import type { Metadata } from "next";
// import 字体
import { Inter, Roboto } from "next/font/google";
import NavBar from "./NavBar";
import AuthProvider from "./auth/Provider";

const inter = Inter({ subsets: ["latin"] });
// 调用字体
const roboto = Roboto({ subsets: ["latin"], weight: ["400", "500"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" data-theme="winter">
      {/* 设置字体 */}
      <body className={roboto.className}>
        <AuthProvider>
          <NavBar />
          <main className="p-5">{children}</main>
        </AuthProvider>
      </body>
    </html>
  );
}

本地字体​

同样的，我们也可以使用本地字体。这里以 poppings 字体为例。首先将下载好的文件放到 "public/fonts" 中。然后和官方字体一样，在 layout.tsx 中调用

# layout.tsx

import "./globals.css";
import type { Metadata } from "next";
import { Inter, Roboto } from "next/font/google";
// import 字体
import localFont from "next/font/local";
import NavBar from "./NavBar";
import AuthProvider from "./auth/Provider";

const inter = Inter({ subsets: ["latin"] });
const roboto = Roboto({ subsets: ["latin"], weight: ["400", "500"] });
// 设置source和变量名(用于TailWind)
const poppins = localFont({
  src: "../public/fonts/Poppins-Regular.ttf",
  variable: "--font-poppings",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" data-theme="winter">
      {/* 设置字体，注意使用 .variable 而不是 .className */}
      <body className={poppins.variable}>
        <AuthProvider>
          <NavBar />
          <main className="p-5">{children}</main>
        </AuthProvider>
      </body>
    </html>
  );
}

除此之外，我们可以将自定义字体注册到 TailWind 中:

  # tailwind.config.ts

  import type { Config } from "tailwindcss";

  const config: Config = {
    content: [
      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
      "./components/**/*.{js,ts,jsx,tsx,mdx}",
      "./app/**/*.{js,ts,jsx,tsx,mdx}",
    ],
    theme: {
      extend: {
        backgroundImage: {
          "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
          "gradient-conic":
            "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
        },
        // 注册字体，其 var 就是刚刚设置的 variable
+       fontFamily: {
+         poppins: "var(--font-poppings)",
+       },
      },
    },
    plugins: [require("daisyui")],
    daisyui: ["winter"],
  };
  export default config;

注册好之后，就可以像下面这样使用

<h1 className="font-poppins">Hello World!</h1>

同样也可以直接应用到 global.css 中 来覆盖所有的 h1 标签

@layer base {
  h1 {
    @apply font-extrabold text-2xl mb-3 font-poppins;
  }
}

搜索引擎优化​

本章代码链接

我们可以在每个 pag.tsx 中添加以下内容，包括每页的题目和描述等内容

import { Metadata } from "next";

export const metadata: Metadata = {
  title: "...",
  description: "...",
};

我们也可以根据某些数据来自动生成 metadata，比如从 API 或者数据库中获取数据

import { Metadata } from "next";

export async function generateMetada(): Promise<Metadata> {
  const metaData = await fetch("");
  return {
    title: "metaData.title",
    description: "...",
  };+
}

Lazy Loading​

本章代码链接

在某些页面可能存在过多的组件，而且这些组件并不是一进到页面就会显示的，比如点击某个 button 才会显示，此时如果组件的数据量过于庞大(比如一个富文本编辑器)，就会导致加载十分缓慢，此时就可以用到 Lazy Loading。在下面的演示中，我们的 HeavyComponent 不用一开始就 import 进来，而是使用 dynamic 函数进行导入，会自动在需要的时候导入，我们还可以设置 loading 函数，让其在加载时有占位符

- import HeavyComponent from "./components/HeavyComponent";
+ import dynamic from "next/dynamic";
+ const HeavyComponent = dynamic(() => import("./components/HeavyComponent"), {
+   ssr: false,
+   loading: () => <p>Loading...</p>,
+ });
  export default async function Home() {
    const [show, setShow] = useState(false);
    return (
      ...
        <button onClick={() => setShow(true)}>Show</button>
        Show && <HeavyComponent />
      ...
    );
  }

同样的，比如我们需要用到某个函数，我们也可以使用 import 函数来进行 Lazy Loading

<button onClick={()=>{
  _ = import("./components/sort");
  const item = []
  _.sort(item,asec);
}}>Sort<>

 下一篇讲部署

Casta-mere
关注
专栏目录
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 3876
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
known-app:Frontend Masters中的生产级Next.js课程。 @hendrixer是老师
03-13
1. **Next.js入门**：介绍Next.js的基本架构和核心概念，如pages目录、API routes、getStaticProps和getServerSideProps等。 2. **动态路由**：学习如何创建动态路由以处理不同参数的URL，以及如何通过...
【Next.js 入门教程系列】08-发送邮件
最新发布
Castamere的博客
10-12 139
【Next.js 入门教程系列】08-发送邮件。使用 React email 在 Next.js 项目中发送、管理邮件
【Next.js 入门教程系列】00-写在前面
Castamere的博客
10-09 252
【Next.js 入门教程系列】00-写在前面
【Next.js 入门指南】5分钟创建你的第一个 Next.js 应用
一个8年大数据开发工程师的碎碎念
09-02 1482
在短短的几分钟里，你已经完成了一个 Next.js 应用的创建、开发和部署。这是一个令人兴奋的开始！Next.js 的世界还有很多等待你去探索。继续学习，不断实践，你会发现 Next.js 能帮助你构建出令人惊叹的 Web 应用。记住，每个专家都是从新手开始的。保持好奇心，勇于尝试，你一定会在 Next.js 的旅程中取得巨大的进步。期待在不久的将来看到你用 Next.js 创造出的精彩作品！
开源项目教程：Next.js 企业网站模板 - Strapi集成
gitblog_00272的博客
09-08 618
开源项目教程：Next.js 企业网站模板 - Strapi集成 nextjs-corporate-starterStrapi Demo application for Corporate Websites using Next.js项目地址:https://gitcode.com/gh_mirrors/ne/nextjs-corporate-starter 项目介绍 Strapi nextjs...
服务端渲染框架：Nuxt.js 与 Next.js 的区别和对比
专注于全栈开发领域
07-17 1685
Nuxt. js 和 Next. js 都是强大的服务端渲染框架，它们分别针对 Vue. js 和 React 生态系统提供了高效的解决方案。选择哪个框架取决于您的技术栈、项目需求以及个人偏好。无论是 Nuxt. js 的自动化和模块化特性，还是 Next. js 的静态网站生成和组件动态加载能力，都能帮助开发者构建高性能的 Web 应用。开发者在选择框架时，应考虑框架的学习曲线、社区支持、生态系统丰富度以及与现有项目的兼容性。通过深入理解每个框架的特点和使用技巧，您可以做出更明智的技术选型决策。
Node.js 简单教程
鬼斩
03-19 1370
Node.js在服务器端应用方面有着广泛的应用。它可以用于构建高性能的Web服务器，处理大量并发请求。通过Node.js的事件驱动和非阻塞I/O的特性，可以轻松构建高效的服务器端应用程序。 举例来说，可以使用Node.js构建基于Express框架的Web应用程序，用于处理HTTP请求、路由控制、模板渲染等。同时，Node.js也可以用于构建实时通讯的应用，比如基于WebSocket的聊天应用程序。
Node.js从入门到精通
qq_43198747的博客
01-23 6511
Node.js简介  第 1 章 2 第 1 章 Node.js 简介 Node.js，或者 Node，是一个可以让 JavaScript 运行在服务器端的平台。它可以让 JavaScript 脱离浏览器的束缚运行在一般的服务器环境下，就像运行 Python、Perl、PHP、Ruby  程序一样。你可以用 Node.js 轻松地进行服务器端应用开发，Python、Perl、PHP、Ruby 能...
全栈开发的必备利器 Next.js
崔颢的博客
03-12 1093
Next.js作为一个备受推崇的React框架，在现代Web开发中扮演着重要的角色。它通过优秀的性能、灵活性和开发体验，吸引了众多前端程序员和全栈程序员的青睐。与Nuxt.js相比，Next.js在React生态系统的支持和学习曲线方面具备优势。同时，Next.js拥有一个活跃的社区，提供了丰富的资源和支持。如果您想学习Next.js，可以访问我的Next.js全栈指南，其中包含了一系列关于Next.js的教程和示例代码，帮助您快速掌握Next.js的开发技能。
Express.js入门指南：构建高效可靠的Node.js应用
本章将介绍Express.js的概念、特点和优势，以及选择Express.js构建Node.js应用的理由。 ### 1.1 什么是Express.js Express.js是一个简洁而灵活的Node.js Web应用程序框架。它提供了一组简单的API，可用于处理HTTP...
前端框架Vue.js入门与实践
Vue.js 是一款流行的前端 JavaScript 框架，由中国开发者尤雨溪于2014年创建。Vue.js 最初是作为个人项目开发的，但随着时间的推移，它快速发展成为一款备受欢迎的开源项目，并受到了广泛的关注和采纳。 ## 1.2 为...
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 2036
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
更新上市公司企业机构投资者实地调研数据（2013-2023年）.txt
10-11
因文件较多，数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。样例数据及详细介绍参见文章：https://blog.csdn.net/samLi0620/article/details/142865262
一次性叉子压成型机_三维3D设计图纸.zip
10-11
一次性叉子压成型机_三维3D设计图纸.zip
柚子家政小程序wnjz_sun6.2.3安装更新一体包带全套装修素材.zip
10-11
项目包含前后台完整源码，后端采用 PHP 语言开发，前台为小程序。 项目都经过严格调试，确保可以运行！ 具体项目介绍可查看博主文章 助力学习实践，提升编程技能，快来获取这份宝贵的资源吧！
CapCut_12.0(1).ipa
10-11
CapCut_12.0(1).ipa
office2010（excel&ppt）-3H.pptx
10-11
office2010（excel&ppt）-3H.pptx
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值