NextServicio de archivos estáticos JS

NextJs es un marco impresionante basado en React que proporciona a un desarrollador todo lo necesario para aplicaciones de nivel de producción junto con increíbles funciones integradas, personalizaciones y un entorno fácil de desarrollar.

Archivos estáticos: todos aquellos archivos que la aplicación debe entregar al usuario, como imágenes, archivos HTML estáticos, archivos js estáticos, favicon, SVG, robots.txt, etc., son archivos estáticos. Estos archivos permanecen estáticos o iguales y deben entregarse al usuario general tal como están.

Añadir archivo estático en Next.js: Para añadir archivos estáticos, Next Js nos ha proporcionado la carpeta “public”. Esta es la carpeta donde debemos guardar todos nuestros archivos estáticos.

Nota: Los archivos estáticos solo se pueden guardar en la carpeta pública. Ninguna otra carpeta podría servir archivos estáticos en NextJs. Podemos hacer referencia a estos archivos estáticos a través de nuestro código a partir de la URL base «/».

En esta publicación, vamos a echar un vistazo al servicio de archivos estáticos en NextJs.

Crear aplicación NextJS: puede crear un nuevo proyecto Next.js con el siguiente comando:

npx create-next-app my-awesome-app

Estructura del proyecto: Se verá así.

Estructura de directorios de nuestra increíble aplicación

Ejemplo: si hay un archivo de imagen llamado geeksforgeeks.png en nuestra carpeta pública , podemos referirnos a él usando /geeksforgeeks.png en nuestro código.

import Image from "next/image";
import styles from "../styles/Home.module.css";
  
export default function Home() {
    return (
        <div className={styles.container}>
            <main className={styles.main}>
                <h1 className={styles.title}>My Awesome Next App</h1>
  
                <Image src="/geeksforgeeks.png" width={500} height={100} />
            </main>
        </div>
    );
}

Paso para ejecutar la aplicación: Ahora inicie la aplicación ejecutando el siguiente comando.

npm start

Salida: Del mismo modo, también puede servir otros archivos estáticos.

Salida de nuestro código anterior

Nota: asegúrese de que ningún archivo en el directorio «público» tenga el mismo nombre que un archivo en el directorio «páginas», ya que eso puede causar un error.

Referencia: https://nextjs.org/docs/basic-features/static-file-serving