Mobile Optimization
30-60 minIntermediate
Implement responsive design and mobile-friendly layouts in Next.js applications.
Prerequisites
- CSS Modules or Tailwind CSS knowledge
Beginner Recommended
Responsive Design
Viewport settings and CSS.
1
Viewport Meta Tag
1
Ensure the viewport meta tag is correct in your root layout.
2
Default Next.js layout usually includes this.
Example
export const metadata = {
viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
}2
Responsive Images
1
Use the sizes prop on the next/image component to serve appropriate image sizes for different viewports.
Example
<Image
src="/pic.jpg"
fill
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
alt="Picture"
/>Verification Checklist
- Check the Lighthouse Mobile Score to identify mobile-specific issues.
- Use the Google Mobile-Friendly Test (if available) or Chrome DevTools Device Mode.