二、Next.js 的 Assets, Metadata, and CSS

原文参考：

• https://nextjs.org/learn/basics/assets-metadata-css

静态资源存储 (Assets)

• 可以在顶级公共目录下提供静态资产，如图像等数据，接下来是如何存储及引用他们，为了接下来的测试做一些准备工作。
• 创建目录 public/images
• 找一个大致 400px 乘 400px 左右的 jpg 图片，存进去。
• 将该文件重新命名为 profile.jpg

Image 组件

• 相较于直接试用 标记有如下好处：

1、根据不同屏幕尺寸对图片尺寸进行优化，避免小设备上使用大图的资源浪费。
2、支持Lazy loaded。

• 修改一下之前添加的 first-post.js

import Link from 'next/link';
import Image from "next/image";

export default function FirstPost() {
  return <>
    
First Post
    

      Back to home Back!
    
    
  ;
}

• 运行后的结果，经过比对可以看出图片是按照 height width 进行了对应的比例压缩。

  
  
  image.png

Metadata 组件

• Head 组件需要通过 next/head 引入进来。
• 做一个尝试继续修改 first-post.js 文件给这个页面加入 Head

import Link from 'next/link';
import Image from "next/image";
// import Head from "next/document"; 注意HEAD不要从这里引入，如果从这里会报错 `Cannot destructure property 'styles' of 'this.context' as it is null`
import Head from 'next/head';

export default function FirstPost() {
  return <>
    
      
    
    
First Post
    

      Back to home Back!
    
    
  ;
}

• 结果：

  
  
  image.png

添加第三方JavaScript到页面

• Next 框架提供了 next/script 来辅助引用外部脚本，当然 script 标签依然可以工作，但是最好通过这个来引入，他可以添加一些策略控制和加载后的事件，体验会更好。
• 继续修改 first-post.js 文件进行测试:

import Link from 'next/link';
import Image from "next/image";
import Script from 'next/script';
import Head from 'next/head';

export default function FirstPost() {
  return <>
    
      
    
    {/*这里是新加入的内容*/}