NextJS 静态文件服务

NextJs 是一个很棒的基于 React 的框架，它为开发人员提供了生产级应用程序所需的一切，以及很棒的内置功能、自定义和易于开发的环境。

静态文件：应用程序需要向用户提供的所有文件，如图像、静态 HTML 文件、静态 js 文件、favicon、SVG、robots.txt 等都是静态文件。这些文件保持静态或相同，需要按原样提供给一般用户。

在 Next.js 中添加静态文件：为了添加静态文件，Next Js 为我们提供了“public”文件夹。这是我们需要保存所有静态文件的文件夹。

注意：静态文件只能保存在公用文件夹中。没有其他文件夹可以在 NextJs 中提供静态文件。我们可以通过从基本 URL“/”开始的代码来引用这些静态文件。

在这篇文章中，我们将看看 NextJs 中的静态文件服务。

创建 NextJS 应用程序：您可以使用以下命令创建一个新的 Next.js 项目：

npx create-next-app my-awesome-app

项目结构：它看起来像这样。

我们很棒的应用程序的目录结构

示例：如果有一个名为geeksforgeeks.png的图像文件 在我们的公共文件夹中，然后我们可以在我们的代码中使用/geeksforgeeks.png来引用它。

index.js

import Image from "next/image";
import styles from "../styles/Home.module.css";
  
export default function Home() {
    return (
        

            

                
My Awesome Next App
  
                
            
        
    );
}

运行应用程序的步骤：现在通过运行以下命令启动应用程序。

npm start

输出：同样，您也可以提供其他静态文件。

我们上面代码的输出

注意：确保“public”目录中没有文件与“pages”目录中的文件同名，否则会导致错误。

参考： https://nextjs.org/docs/basic-features/static-file-serving