Nextjs
Published in

Nextjs

Nextjs

How to create a Static site public folder in Next.js?

Best practice with a public folder in nextjs

Nextjs folder structure
Nextjs folder structure

Demo and play

You can play with code on codesandbox

Nextjs folder structure with public folder
Nextjs folder structure

What do you add to the public folder?

It depends upon you what you add to the public folder. for example, you add a favicon and fonts file in the public folder.

<link rel="stylesheet" href="/Inter-ExtraLight.ttf" /><link rel="stylesheet" href="/global.css" />

How to access files in the public folder?

You can access the file used /in the public folder. You do not need to import files into the public folder.

<Image src="/lake.png" alt="test public folder image" width="500"   height="200" />

Add CSS, SVG, Javascript and images File In The Public folder.

You do not add a CSS file in the public folder. Because nextjs use CSS module (style.module.css ) to add CSS for the component.

import "../public/style.module.css" // it not working
<link rel="stylesheet" href="/global.css" />
@import url("Inter-ExtraLight.ttf");

Do

  • Create a public folder at the root level.
  • You can add a verification HTML file inside the public folder.

Not

  • Do not use another name in publics, Public , etc
  • You do not use ./like.png to access the file.
  • All the files you add to the public folder access after the built or production level.
  • You do not need to import files in the public folder.
  • Do not create a file with the same name in your public folder or the entire app.
Same file name Error in nextjs
When the file is the same in the public and root levels, you face the same file name error in nextjs.

Conclusion

In my experience, the public folder is only helpful for domain verification and other use based on requirements.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/