Skip to main content Link Menu Expand (external link) Left Arrow Right Arrow Document Search Copy Copied

Summary

In the second part of this workshop, we learned how to optimize a Next.js SPA for mobile devices by scaling its components to fit properly on small screens. Our mobile-friendly SPA includes:

  • An adaptive footer that changes its layout and position according to the display size
  • An adaptive navigation bar that makes use of a drawer on mobile devices
  • Responsive buttons that shrink on mobile devices
  • Vertical tabs that are automatically moved to a drawer on mobile devices

If you would like to learn more about the Next.js framework and the different MUI components, please consult the resources linked in the conclusion of this workshop series.