Next.js Discord

Discord Forum

next config images remotePatterns

Unanswered
American Chinchilla posted this in #help-forum
Open in Discord
American ChinchillaOP
hey is there a way that instead of such config: 
images: {
    remotePatterns: [
      { protocol: "http", hostname: "localhost" },
      { protocol: "https", hostname: "localhost" },
    ],
  },
i can do whole url like http://localhost:8055 and not split it up to protocol hostname and port?

15 Replies

American ChinchillaOP
im just having it in env variable
American Crow
  images: {
    domains: ['localhost', 'images.unsplash.com'],
  },
@American Crow tsx images: { domains: ['localhost', 'images.unsplash.com'], },
American ChinchillaOP
problem is i have the link in this format: http://localhost:8055
American Crow
Well these are the 2 options. domains does not support wildcards nor protocol nor ports. Have to stick with remotePatterns if you need a port
American ChinchillaOP
mkay
@American Crow Well these are the 2 options. domains does not support wildcards nor protocol nor ports. Have to stick with `remotePatterns` if you need a port
American ChinchillaOP
also can you help me with another error im getting 
Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
i belive its cause i nest 2 Link components inside
American Crow
Yea i mean that can be anything it's just guessing. If you don't have a better error you'll have to comment out components / parts of code you think the hydration error is coming from and pin point it that way
American ChinchillaOP
yeah when i comment out the inner Link it goes away but still
American Crow
Okay so it is nested Links not valid html
American ChinchillaOP
i can give you simple demo 
const Card = () => {

return <Link href="/details/2">
    ... some content
    <Link href="#section">
        <Button>Text</Button>
    </Link>
</Link>
}
simple demo
i want the whole card to be clickable but also i want a button inside a card to do sth else
American Crow
yea you'll have to separate the card into somthing like cardheader cardcontent and cardfooter. only outter linking cardheader/content and but the inner link into cardfooter
American ChinchillaOP
mkay ill try thanks
American Crow
if you need a blueprint : https://ui.shadcn.com/docs/components/card