Next.js-静态文件服务

Next.js是基于React的一个轻量级的应用框架，它可以让开发人员快速构建出高性能的React应用。除此之外，Next.js还提供了很多有用的功能，如动态路由、预渲染、SSR(Server-Side Rendering)等。其中我们对于Next.js静态文件服务的功能进行介绍。

静态文件服务

在Next.js中，我们可以使用静态文件服务来提供CSS、图片、视频、音频和其他文件等静态资源。这非常方便，因为Next.js对于这些文件的处理是强大的，并能自动优化这些文件以提高网站的性能。我们不必再手工进行处理，以及手工配置Nginx、Apache等Web服务器。

在Next.js中，我们建议在/public文件夹中存储我们的静态资源。然后可以通过URL路径来访问这些静态文件。

访问静态文件

通过在浏览器中输入URL地址http://localhost:3000/static/image.png，我们就可以访问到我们存储在/public/static/image.png文件中的图片。如下代码所示，我们通过在<img>标签中添加src属性来访问这个图片。

![alt text](/static/image.png)

Next.js还可以通过<video>和<audio>标签来播放视频和音频，而不需要手工添加播放器。

<video controls>
    <source src="/static/video.mp4" type="video/mp4" />
    <source src="/static/video.webm" type="video/webm" />
    <source src="/static/video.ogg" type="video/ogg" />
</video>

<audio controls>
    <source src="/static/audio.mp3" type="audio/mp3" />
    <source src="/static/audio.ogg" type="audio/ogg" />
</audio>

导入静态文件

除了访问静态文件，我们还可以导入静态文件到我们的代码中。以图片为例，可以在JavaScript或CSS文件中通过import语句来导入图片。

import Logo from '../public/logo.png'

function MyApp({ Component, pageProps }) {
    return (
        <div>
            <img src={Logo} />
            <Component {...pageProps} />
        </div>
    )
}

export default MyApp

这个Logo没有使用<img>标签，而是直接使用src属性。因为Webpack会将图片转换成一个URL，并将其嵌入到JavaScript中。在JavaScript中，它会解析为一个字符串，表示图片的路径。

总结

Next.js提供了很好的静态文件服务，我们不需要再手工进行处理和配置。我们可以把所有的静态文件放在/public目录下，然后通过URL进行访问。我们也可以在JavaScript或CSS文件中使用import语句导入图片、视频、音频等静态文件。这使得我们的代码变得更加干净、易于维护。