建网站需要软件,增城手机网站建设,营销型设计网站,南宁网站建设优化排名原文链接 CSDN 的排版/样式可能有问题#xff0c;去我的博客查看原文系列吧#xff0c;觉得有用的话#xff0c; 给我的库点个star#xff0c;关注一下吧 上一篇【Next.js 入门教程系列】08-发送邮件
优化技巧
本篇包括以下内容:
Optimizing imagesUsing third-party JS…原文链接 CSDN 的排版/样式可能有问题去我的博客查看原文系列吧觉得有用的话 给我的库点个star关注一下吧 上一篇【Next.js 入门教程系列】08-发送邮件
优化技巧
本篇包括以下内容:
Optimizing imagesUsing third-party JS librariesUsing custom fontsSearch engine optimizaionLazy 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} altAn image of RDR2 /Image srchttps://bit.ly/react-cover altReact 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 使用第三方脚本
在使用第三方 js 脚本的时候我们可以将其封装为一个 component然后在对应的 layout.tsx 中直接使用即可。注意应使用 Next 的 Script 标签。若有识别不出 js 语法的问题可以用 {} 将 js 代码包裹起来
字体
本章代码链接
网络字体
想要使用其他的官方字体我们只需要在 layout.tsx 中从 next/font 中导入并在对应标签的 className 中设置即可。比如下面就是使用 Roboto 字体的演示。在Google Fonts这里可以找到各种 Google 字体。在使用这种官方字体库时仅在第一次使用时会去下载这个字体文件后面会一直使用下载好的文件不必担心由于网络问题导致字体出错
# layout.tsximport ./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 langen data-themewinter{/* 设置字体 */}body className{roboto.className}AuthProviderNavBar /main classNamep-5{children}/main/AuthProvider/body/html);
}本地字体
同样的我们也可以使用本地字体。这里以 poppings 字体为例。首先将下载好的文件放到 public/fonts 中。然后和官方字体一样在 layout.tsx 中调用
# layout.tsximport ./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 langen data-themewinter{/* 设置字体注意使用 .variable 而不是 .className */}body className{poppins.variable}AuthProviderNavBar /main classNamep-5{children}/main/AuthProvider/body/html);
}除此之外我们可以将自定义字体注册到 TailWind 中: # tailwind.config.tsimport 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 就是刚刚设置的 variablefontFamily: {poppins: var(--font-poppings),},},},plugins: [require(daisyui)],daisyui: [winter],};export default config;注册好之后就可以像下面这样使用
h1 classNamefont-poppinsHello 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(): PromiseMetadata {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: () pLoading.../p,});export default async function Home() {const [show, setShow] useState(false);return (...button onClick{() setShow(true)}Show/buttonShow HeavyComponent /...);}同样的比如我们需要用到某个函数我们也可以使用 import 函数来进行 Lazy Loading
button onClick{(){_ import(./components/sort);const item []_.sort(item,asec);
}}Sort 下一篇讲部署
下一篇【Next.js 入门教程系列】10-部署
