Theo's Typesafe Cult•2y ago

Silly Newbie NextJS question

What causes the upper left tailwind svg (logo) to load late causing the header navbar to shift when switching from the Home to the About menu items? https://rtc-two.vercel.app/ I realize these pages are server rendered and the SVG is being loaded after the page is loaded. But I would assume that after first load, the SVG would be cached and load super fast. Maybe it is just a silly matter of setting an explicit width and height so the shift is not noticeable?

RTC App

Misa's long awaited research and development app!

3 Replies

cdi.dev•2y ago

You are right, one common technique to prevent nav items from shifting when a logo loads is to set a fixed width for the logo (try a w-10 on your div above the image and see if it does the trick). Also, looking at your code, it seems you're not using the next/image component to optimise the image. You can find its docs here: https://nextjs.org/docs/api-reference/next/image As it seems that the logo is an external image, if you plan to use the next/image with external images, you will have to either set the external domains in the next.config.js

Example:
images: {
    domains: ['tailwindui.com'],
  },

Example:
images: {
    domains: ['tailwindui.com'],
  },

Or the recommended way remotePatterns:

Example:
images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'tailwindui.com',
      },
    ],
  },

Example:
images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'tailwindui.com',
      },
    ],
  },

If you're going to use only local images, you won't need to add that.

next/image | Next.js

Enable Image Optimization with the built-in Image component.

sheng2808•2y ago

like what @CDi said. And since it's a logo, I suggest just using a local svg image, so the server doesn't have to keep pulling data from elsewhere every time

jeff.kershnerOP•2y ago

Big difference: https://rtc-two.vercel.app/ Thank you!

Gaming

Programming

Silly Newbie NextJS question