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.