How to fix TypeScript error for static import images in nextjs

Question

I am trying to optimize images in my nextjs app, but for some reason, I am facing an issue that says: Cannot find module '/images/homeBg.jpg' or its corresponding type declarations.

The image is stored in public/images/name.jpg.

import { Layout } from '@common';
import Trips from '@ui/Trips/Trips';
import Image from 'next/image';
import bgImage from '/images/homeBg.jpg';
const HomePage = () => {
  return (
    <div className="relative h-screen w-full">
      <Image
        src={bgImage}
        fill
        className="-z-10 object-cover"
        alt="backgound_image_for_home_page"
      />
      <div className="mx-auto flex h-full w-full max-w-[2000px] flex-col space-y-10 px-7 py-36 lg:px-14">
        <h3 className="text-3xl font-normal leading-10 tracking-wider text-white lg:text-4xl">
          Welcome back, <br /> <span className="font-bold">Nedim!</span>
        </h3>
        <Trips />
      </div>
    </div>
  );
};

export default HomePage;

HomePage.layout = Layout;

Pretty sure the answers here still apply: stackoverflow.com/questions/51100401/typescript-image-import — k.tten
– k.tten, Commented Jan 4, 2023 at 16:30
An import like this should be relative and not absolute. nextjs.org/docs/basic-features/image-optimization#local-images — madflow
– madflow, Commented Jan 4, 2023 at 16:36

oviirup · Accepted Answer · 2023-09-21 14:34:17Z

4

When you are starting your Next.JS app in dev mode it will create next-env.d.ts in the root of your project as well as some type-definition files in .next/types folder that is necessary for type safety.

Run the development command npm run dev at least once to see the changes.

You can also explicitly import next-env.d.ts in your tsconfig file

{
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "next-env.d.ts",
    ".next/types/**/*.ts"
  ],
  ...  
}

edited Sep 21, 2023 at 14:34

answered Aug 16, 2023 at 22:47

oviirup

1298 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to fix TypeScript error for static import images in nextjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related