How To Serve Images from Next.js in 2023

Photo by Josh Rakower on Unsplash

Quick steps to serving images with Next.js:

• Put all your images inside the public folder directory
• Ensure the names of the files in your public folder are not the same as any files in your pages folder directory as this will cause an error
• If you don’t know where the public directory is, it is the folder where the favicon.ico file is located
• Do not change the name of the public folder directory
• Only assets that are in the public directory at build time will be served by Next.js
• For other static content, you can use getStaticProps and getStaticPaths (https://medium.com/@remoteupskill/serving-static-files-with-next-js-fed0e75041f3)

If you are thinking of switching to a career in tech or changing to a new tech job, here are some job sites you can get started with:

Photo by Mukuko Studio on Unsplash

• https://underdog.io
• https://dailytechjobs.com
• https://www.hiretechladies.com
• https://weworkremotely.com

Do something today!

Pro Tip: This is also the public directory is where you can put your robots.txt file, which is the file you tell what web scrapers should and should not do when they visit your site

So if you have saved an image called “me.png” in the public folder, then you can access the static asset like this (note: this is used inside a React component):

src="/me.png"

To create a component that uses a static image in your public folder directory, you could use the following code:

import Image from 'next/image'

function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}
export default Avatar

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

If you want to learn more about Next.js, read this:

The Best Way To Fetch Data in Next.js

Some alternatives to using Next.js for serving static websites are:

• Vercel (used with Next.js)
• Wordpress
• Gatsby

We provide the following 1 on 1 training programs:

• Full Stack Web Development
• Interview Prep

If you have any questions regarding our services or publications , you can reach us at team@remoteupskill.com

We publish short tech tutorials on a regular basis so consider subscribing to our Medium Blog.

Until next time — keep coding while moving small steps forward on this coding adventure of yours.

But more importantly, stay focused!