全书目录

第五篇：Next.js 完全指南 —— 商业综合体宇宙

第十一章：样式、字体、图片、Metadata —— 装修和招牌也得按综合体标准来

1 分钟 192 字 第 122 / 962 个阅读单元

Next.js 不只是让你把页面跑起来，它还想让你把静态资源、SEO 和性能一起管起来。

#1. 字体：优先用 next/font
tsx
// app/layout.tsx
import { Noto_Sans_SC } from 'next/font/google';

const noto = Noto_Sans_SC({
  subsets: ['latin'],
  weight: ['400', '500', '700'],
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body className={noto.className}>{children}</body>
    </html>
  );
}
#2. 图片：优先用 next/image
tsx
import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/mall-hero.jpg"
      alt="商业综合体封面"
      width={1200}
      height={800}
      priority
    />
  );
}
#3. Metadata：把门头、搜索展示、分享卡片一次配置清楚
tsx
// app/layout.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Next.js 商业综合体',
  description: '用商业综合体理解 Next.js',
};

你可以把它们理解成：

  • next/font：统一招牌字体采购
  • next/image：统一图像调度和优化
  • metadata：城市地图、搜索名录、社交卡片