Nextjs v10 + tailwindcss v2

[rhnmht30]

changes:

• remove bootstrap, styled-components
• add tailwindcss, postcss and autoprefixer
• seperate folder for styles and import relevant styles
• remove package-lock.json and .babelrc
• new custom breakpoints

refactor:

• convert all pages to use tailwind classes
• add dsc colors to config
• add global styles
• move icons to seperate file
• make social icons same in footer and about section
• make icons iterable
• make navbar sticky
• make button background blue on hover
• reduce border on team image on hover
• remove unececssary react imports

fixes:

• move layout component to _app.js to solve frequent render of navbar and footer comps.
• font contrast and size fixes
• fix font size of college name in sidenav
• fix button colors
• lazy load iframe
• increase clickable area for footer links
• change images initial widths to reduce cumm. layout shift in teams
• lazy load iframe till the footer is mounted
• lazy load react-lottie
• load animation json asynchronously
• reduce first js load from 195kb to 88kb tada

I have tried running lighthouse metrics with several scenarios:

• Scenario 1: page has embed map and lottie animation (without above optimisations)

  • mobile: 48/100
  • desktop: 78/100

• Scenario 2: page has embed map and lottie animation (with above optimisations)

  • mobile: 60/100
  • desktop: 80/100

• Scenario 3: page has no embed map and lottie animation (with above optimisations)

  • mobile: 64/100
  • desktop: 85/100

• Scenario 4: page has embed map and no lottie animation (with above optimisations)

  • mobile: 87/100
  • desktop: 95/100

• Scenario 5: page has no embed map and no lottie animation (with above optimisations)

  • mobile: 92/100
  • desktop: 99/100

Verdict: Lottie animations are degrading performance more than embed maps :) I have settled for scenario 2.

[rhnmht30]

Nice, next/image doesn't work when we do next export

Possible solution:

• Use next start, which starts the Image Optimization API, and upload that to own serverless platform.
• Use Vercel to deploy, which supports Image Optimization. (will try this, but netlify gives short custom short links)
• Configure a third-party loader in next.config.js.

[rhnmht30]

Deploy preview on vercel Deploy preview on netlify 🎉

[goelaakash79]

Can you try and deploy it again? I guess there is some error

[goelaakash79]

Okay, checked it. Elements, paddings and margins are not the same as before. You need to fix it.

[goelaakash79]

Also, look for the input focus. When the input box is clicked, the browser adds up a weird border around the element. Fix it as well.

[rhnmht30]

Okay, checked it. Elements, paddings and margins are not the same as before. You need to fix it.

Can you specify those elements? They may not be exactly the same since tailwind uses rem instead of px.

[rhnmht30]

Maximum achievable performance score when using lottie animations

Mobile

Desktop

Desktops have a higher score because it has more resources than mobile :)

Evidence to prove that lottie animations are killing the performance. Let's see the team's page performance, which has images but no animations.

Mobile

Desktop

Mobile scores are still less than 90 because of embedded google maps

Pretty much nothing more can be done to improve performance. 🙇🏽

[goelaakash79]

@mayanksh99 can you please check it? Compare the live version with the PR preview.

[rhnmht30]

Finally 🎉 Successfully deployed on Netlify! Deploy previews are working as expected 🛩️

Also, the problem with next/image not working with netlify is solved!

Nice, next/image doesn't work when we do next export

Possible solution:

• Use next start, which starts the Image Optimization API, and upload that to own serverless platform.
• Use Vercel to deploy, which supports Image Optimization. (will try this, but netlify gives short custom short links)
• Configure a third-party loader in next.config.js.

I went with the 3rd option. Using Cloudinary to fetch the remote image URLs, which are now optimized and cached as expected 🎉

[padmansh]

Can we just load svg for mobiles rather than loading complete lottie animation ?

[rhnmht30]

closing due to inactivity. To solve deployment issue refer to: https://rhnmht30.dev/blog/next-image-with-netlify