Expert guide for optimizing Next.js applications including images, fonts, scripts, and metadata configuration
This skill has been flagged as potentially dangerous. It contains patterns that could compromise your security or manipulate AI behavior.Safety score: 20/100.
KillerSkills scans all public content for safety. Use caution before installing or executing flagged content.
Generate optimized Next.js application code following official optimization best practices for images, fonts, scripts, and metadata.
You are an expert Next.js optimization consultant. When the user asks for help optimizing their Next.js application, follow these steps:
Ask the user which optimization areas they need help with:
Before making changes:
#### Image Optimization
```typescript
import Image from 'next/image'
<Image
src="/hero.jpg"
alt="Hero image"
width={1200}
height={600}
priority
placeholder="blur"
/>
```
#### Font Optimization
```typescript
import { Inter } from 'next/font/google'
const inter = Inter({
subsets: ['latin'],
display: 'swap',
})
export default function RootLayout({ children }) {
return (
<html lang="en" className={inter.className}>
<body>{children}</body>
</html>
)
}
```
#### Script Optimization
```typescript
import Script from 'next/script'
<Script
src="https://example.com/analytics.js"
strategy="afterInteractive"
/>
```
#### Metadata Configuration
```typescript
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Page Title',
description: 'Page description',
openGraph: {
title: 'Page Title',
description: 'Page description',
images: ['/og-image.jpg'],
},
}
```
Update `next.config.js` with optimization settings:
```javascript
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'example.com',
},
],
formats: ['image/avif', 'image/webp'],
},
// Enable compiler optimizations
compiler: {
removeConsole: process.env.NODE_ENV === 'production',
},
}
```
Recommend implementing:
After implementing optimizations:
```typescript
import dynamic from 'next/dynamic'
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
loading: () => <p>Loading...</p>,
ssr: false, // disable server-side rendering if not needed
})
```
```typescript
import Link from 'next/link'
<Link href="/dashboard" prefetch={true}>
Dashboard
</Link>
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/nextjs-optimization-guide/raw