Skill Gallery
← スキル一覧に戻る
Brutus88Ai

nextjs-best-practices

by Brutus88Ai

Industrial Metal Website f

⭐ 0🍴 0📅 2026年1月25日
GitHubで見るManusで実行

SKILL.md

name: nextjs-best-practices description: Next.js Optimierungen für Bilder, Fonts und Routing

Next.js Best Practices

Hinweis: Dieses Projekt nutzt aktuell Vite. Diese Regeln gelten für zukünftige Next.js-Migration.

Image Optimization

next/image (IMMER nutzen)

import Image from 'next/image';

// ✅ RICHTIG
<Image
  src="/hero.jpg"
  alt="Hero Banner"
  width={1200}
  height={600}
  priority  // Für Above-the-fold Bilder
  placeholder="blur"
  blurDataURL="data:image/..."
/>

// ❌ FALSCH
<img src="/hero.jpg" alt="Hero" />

Responsive Images

<Image
  src="/hero.jpg"
  alt="Hero"
  fill
  sizes="(max-width: 768px) 100vw, 50vw"
  className="object-cover"
/>

Font Optimization

next/font (IMMER nutzen)

// app/layout.tsx
import { Inter, Teko } from 'next/font/google';

const inter = Inter({ 
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter'
});

const teko = Teko({ 
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-teko'
});

export default function Layout({ children }) {
  return (
    <html className={`${inter.variable} ${teko.variable}`}>
      <body>{children}</body>
    </html>
  );
}

Im CSS nutzen

body { font-family: var(--font-inter); }
h1 { font-family: var(--font-teko); }

Routing

App Router Struktur

app/
├── layout.tsx        # Root Layout
├── page.tsx          # Home (/)
├── shop/
│   ├── page.tsx      # Shop (/shop)
│   └── [id]/
│       └── page.tsx  # Product (/shop/123)
└── api/
    └── route.ts      # API Route (/api)

Navigation

import Link from 'next/link';

// ✅ RICHTIG
<Link href="/shop" prefetch={true}>Shop</Link>

// ❌ FALSCH
<a href="/shop">Shop</a>

Dynamic Routes

// app/shop/[id]/page.tsx
export default function Product({ params }: { params: { id: string } }) {
  return <div>Product: {params.id}</div>;
}

// Generate static paths
export async function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }];
}

Metadata

// app/layout.tsx
export const metadata = {
  title: {
    default: 'Eisenbund',
    template: '%s | Eisenbund'
  },
  description: 'Industrial gear for warriors',
  openGraph: { ... }
};

// app/shop/page.tsx
export const metadata = {
  title: 'Shop',  // → "Shop | Eisenbund"
};

Checkliste

  • Alle Bilder via next/image
  • Fonts via next/font (kein Google Fonts CDN)
  • Link statt für interne Navigation
  • Metadata auf allen Seiten
  • API Routes in app/api/

スコア

総合スコア

50/100

リポジトリの品質指標に基づく評価

✓SKILL.md

SKILL.mdファイルが含まれている

+20
○LICENSE

ライセンスが設定されている

0/10
○説明文

100文字以上の説明がある

0/10
○人気

GitHub Stars 100以上

0/15
○最近の活動

3ヶ月以内に更新がある

0/10
○フォーク

10回以上フォークされている

0/5
✓Issue管理

オープンIssueが50未満

+5
✓言語

プログラミング言語が設定されている

+5
○タグ

1つ以上のタグが設定されている

0/5

レビュー

💬

レビュー機能は近日公開予定です