How to import images in NextJS and t3-turbo?
When importing it the way
NextJS recommends you do I get a type error as shown in the picture below.
the way NextJS recommends
https://nextjs.org/docs/app/building-your-application/optimizing/images#local-images
Providing the source in a string directly to the Image component will work fine, but will lose some features, which are only available in the first version. (specifically - having to manually enter the width and hight properties)
Note, this is using a clean clone of create-t3-turbo.
This has been driving me mad for days now. Please help!!!
1 Reply
I solved it.
In prod/dev envs, this is not an issue because as soon as you run
dev nextjs will generate a next-env.d.ts file for you, that will have this line:
The problem pops up when you check the types in CI, since next-env.d.ts is present in .gitignore, the types are not impoerted and you get this error.
I'm not familiar with the t3 CI pipeline, if there's any provided, but in create-t3-turbo this causes a failure.
So to solve it, I just needed to remove next-env.d.ts from .gitignore, it works fine now.