Encountering a host configuration issue while trying to use next/image in a TypeScript environment

I understand that when using Next.js image components without TypeScript, the URL must be configured in next.config.js, but I'm unsure why this doesn't work with TypeScript.

..., is not set up under images in your next.config.js. Learn more here: https://nextjs.org/docs/messages/next-image-unconfigured-host

What's the solution? Do I have to resort to using a regular img tag?

image component:

<Image
    src="https://images.unsplash.com/photo-1621794279356-0150106a4b45?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1"
    alt="blog title"
    width="100"
    height="100"
/>

next.config.ts

export const images = {
  domains: [
    "images.unsplash.com"
  ],
};
typescriptnext.js

Answer №1

In the realm of Next.js, there is a quest for a mystical artifact known as next.config.js, where configurations are said to be stored (often elusive if you are wielding next.config.ts).

To unveil this hidden power, one must transmute their .ts configuration into a sacred .js relic, or craft a new talisman named next.config.js.

// next.config.js
module.exports = {
    images: {
        domains: ['images.unsplash.com']
    }
}

Behold the revelation from the land of Next.js 12 – one can harness the power of ES modules by christening the config file as next.config.mjs. Though not truly embracing the ways of TypeScript, it allows for a harmonious syntax.

// next.config.mjs
export default {
    images: {
        domains: ['images.unsplash.com']
    }
}

Answer №2

In my opinion, it is more advisable to utilize next.config.js for setting up Next.js instead of using next.config.ts in a TypeScript project. It is recommended that this file remain in .js format.

If you are determined to use next.config.ts, you can check out this link.

However, keep in mind that some configurations may lead to slower boot up times, and certain setups may necessitate having both next.config.js and next.config.ts present.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Angular for making API requests using double quotes

I am experiencing an issue with my service where the double quotation marks in my API URL are not displayed as they should be. Instead of displaying ".." around my values, it prints out like %22%27 when the API is called. How can I ensure that my ...

javascriptangulartypescript

Error TS2307: Module 'calculator' could not be located

Running a Sharepoint Framework project in Visual Studio Code: This is the project structure: https://i.stack.imgur.com/GAlsX.png The files are organized as follows: ComplexCalculator.ts export class ComplexCalculator { public sqr(v1: number): number ...

javascriptjsontypescriptgulpvisual-studio-code

Custom "set attribute" feature in TypeScript

One issue I faced was resolved by creating the function shown below : function setProperty<T extends Record<string, string>>(obj: T, key: keyof T) { obj[key] = "hello"; } However, when I tried to compile the code, I encountered an ...

typescriptgenericstypescript-generics

The Datatable is displaying the message "The table is currently empty" despite the fact that the rows have been loaded through Angular

My experience with displaying a data table in Angular was frustrating. Even though all the records were present in the table, it kept showing "no data available." Additionally, the search function refused to work as intended. Whenever I tried searching for ...

angulartypescriptfirebasegoogle-cloud-firestore

Create a dynamic styled component with tags based on props

Looking to craft a dynamic tag using styled components, where the tag is passed in via props. Here's an example of the code: import * as React from 'react'; import styled from 'styled-components'; type ContainerProps = { chi ...

reactjstypescriptstyled-components

What is the TypeScript syntax for defining a component that does not require props to be passed when called?

Can you provide guidance on the correct type to specify for Component in order to compile this example without any type errors? import { memo } from "react"; import * as React from "react"; export function CustomComponent( props: ...

reactjstypescript

What is the correct way to set up a custom class instance with specific parameters at the top level?

Is it possible to utilize the defineString(), defineInt, ... functions within a top-level custom class constructor? defineString() returns a StringParam object which has a value() method. I am looking to use parameterized configuration to initialize an in ...

node.jstypescriptfirebasegoogle-cloud-functionsfirebase-tools

A guide on dynamically showcasing/summoning icons in react by utilizing array data

QUESTION: 1 (SOLVED!) https://i.stack.imgur.com/1M1K7.png What is the best way to display icons based on an array of data codes? const data = [{ img: '01d' }, { img: '02d' }] if(data) { data.map((item) => ( <img src={`./ ...

javascriptreactjstypescriptnext.js

How to set the type of an object property to a string based on a string from an array of strings in TypeScript

Great { choices: ['Bob', 'Chris', 'Alice'], selectedChoice: 'Alice', } Not So Good { choices: ['Bob', 'Chris', 'Alice'], selectedChoice: 'Sam', } I've been exp ...

typescript

Add the Load More feature to your Next JS project for enhanced user experience

Utilizing the SWR package along with Next JS, I have successfully retrieved data and displayed it in a table. Now, my goal is to implement a "load more" type of pagination for the listing page. Below is the code snippet: Locations component: import useSW ...

reactjsreact-hooksnext.jsswr

Encountering an issue with "RangeError: Invalid time value" while trying to pass a variable into the new Date() function

function fetchDate() { const router = useRouter(); const { location, startDate, endDate, numOfGuests } = router.query; const formattedStartDate = format(new Date(startDate), "dd, MMMM yyyy"); const formattedEndDate = format ...

reactjsdatenext.jsdate-fns

Tips for manually inputting dates in Primeng Calendar Datepicker with the slash "/" symbol

I need assistance with adding slashes to manual input when using the primeng Calendar component. <p-calendar [monthNavigator]="true" [yearNavigator]="true" yearRange="1950:2021" ngModel [required]="tru ...

angulartypescriptprimeng

What is the correct way to access $auth in Nuxt with TypeScript?

<script lang="ts"> import LoginAdmin from '@/components/LoginAdmin.vue' import { Component, Vue } from 'nuxt-property-decorator' import Auth from "@nuxtjs/auth"; export default class MyStore extends Vue { pub ...

typescript

Strategies for implementing classes in Typescript

I've been working on incorporating more classes into my project, and I recently created an interface and class for a model: export interface IIndexClient { id?: number; name?: string; user_id?: number; location_id?: number; mindbody_id?: nu ...

javascripttypescript

TypeScript is still throwing an error even after verifying with the hasOwnProperty

There exists a type similar to the following: export type PathType = | LivingstoneSouthernWhiteFacedOwl | ArakGroundhog | HubsCampaigns | HubsCampaignsItemID | HubsAlgos | HubsAlgosItemID | TartuGecko | HammerfestPonies | TrapaniSnowLeop ...

typescript

Issue with loading CSS in Angular 8 upon refreshing the page after building in production

Here is the structure of my index.html: <!doctype html> <html lang="hu"> <head> <meta charset="utf-8"> <title>WebsiteName</title> <base href="/"> <meta name="viewport& ...

angulartypescriptroutespage-refresh

What is the method for specifying a null value in Typescript?

I'm curious if this code snippet is accurate, or if there's a better way to define it. Is there an alternative to using error!? I'm unsure of its meaning and would appreciate clarification. ...

javascripttypescript

When making an Axios API request in Next.js, an error is encountered stating that the property 'map' cannot be read as it is undefined

Hey there! I've been trying to fetch data from the API endpoint in my NextJs application using axios. However, whenever I try to map over the retrieved data, NextJs keeps throwing the error message "TypeError: Cannot read property 'map' of ...

javascriptaxiosnext.js

Even after ensuring the proper type checking, I am still receiving the error message "Property 'message' does not exist on type 'object'"

I have the following code snippet: try { // api call } catch (error) { if (typeof error === 'object' && error !== null && 'message' in error) { if (typeof error.message === 'string') { if (error.me ...

typescript

There seems to be a console error in Angular 5 when using IE 11

I've developed an Angular 4 application using MVC and Visual Studio 2015. Everything runs smoothly when I access the application on Chrome, but I encounter the following exception on IE 11: XHR error: (404 Not Found) loading http://localhost/src/ma ...

angulartypescriptinternet-explorer-11