Search code examples
cssreactjstypescriptnext.jsvercel

Why do Images suddenly jump to cover full screen when changing routes in Next

I am building a website using Next and Typescript. I am using the following packages:

  1. Framer-motion for page transitions
  2. Gsap for simpler animations

When I set the images using the following:

<Link>
    <div className={`figureContainer ${styles.figureContainer}>
        <Image layout="fill" objectFit="contain" src={lockIcon} alt="scx figure" priority={index === 0? true : false } />
        <div className={styles.menuTitle}>{item}</div>
     </div>
</Link>

and in the CSS the figure container class has the following base style:

.figureContainer{
  width: 50%;
  height: 100%;
  position: relative;
  transition: filter 0.4s;
}

When I click a link to go to the store page, on localhost it works perfectly fine but when I deployed it to vercel and tried the same thing at first everything looks like it works but the Images jump to fill the screen when I change routes. Almost as if I set position: absolute on images and relative on the body with no other intermediary parent being set to relative.

This only happens when I change routes on the vercel app: https://scx-landing-revamp-6eid5catf-tochibedford.vercel.app/ why does this happen? how can it be fixed?

Solution

  • I hope you are doing great, I was facing the same issue (using next/image + FramerMotion) and I fixed it today by abstracting all the content in my pages/index.tsx into a IndexScreen.tsx file and then dynamically importing it using:

    import dynamic from 'next/dynamic';

const IndexScreen = dynamic<IndexScreenProps>(() => import('@/screens/indexScreen').then(mod => mod.IndexScreen), {
    ssr: false,
});

    Not sure if it's the best to do, but it worked!

    Here is some reference docs that helped me: https://nextjs.org/docs/advanced-features/dynamic-import In case you are using TypeScript: NextJS dynamic import issue