In Next.jS pages folder contains pages of nextjs routoes . And also It contains a public folder.

Static files are placed in a public folder in a NextJS application.

What type of files are placed in the public folder in NextJS?

  • images
  • CSS
  • manifest.json
  • site verification files from Google, Bing
  • ads.txt
  • site verification files such as Google, Bing …etc.
  • Font face file resources(EOT,TTF,WOFF,woff2 … etc.)
  • robots.txt file
  • favicon.ico
  • humans.txt file
  • Any static file(HTML) that you want to access with the base url or website domain name.

NextJS public folder static files

Let’s consider the nexus project folder structure created with create-next-app

+---public
|       favicon.ico
|       vercel.svg
|

static files such as images, site verification files, and favicons are placed in a public folder of a nextjs root application.

the files in the public folder are accessible with the base url.

For example, if you placed the robots.txt file in the public folder, It is accessible with the localhost:3000/robots.txt file.

How do you place image files in NextJS?

static files such as images are placed in a public folder of a nextjs root application.

You can place the images in a public folder or nested folder structure such as a public/images folder. Images can be accessed in the pages or components with the absolute path as given below

For example, if you placed logo.png in the public/images/logo.png file, The component code can access the logo with the images/logo.png file

Let’s create a Logo Component.

import Image from 'next/image'

function Logo() {
  return <Image src="/images/logo.png" alt="Company Logo " width="100" height="100" />
}

export default Logo

Important points and notes:

  • static file names in the public folder should not match with files in the pages folder, if so, It results in an error.

  • static files in the public folder at build time are accessible, It does not support adding files to the public folder at runtime.

  • Always use a small set of files in the public folder. It is recommended to store in Cloud CDN providers or bucket storage for better storage and performance.