Budowanie Nowoczesnych Aplikacji Astro z Pomocą Claude Code

Przewodnik krok po kroku po tworzeniu szybkich, wydajnych stron i aplikacji webowych używając Astro i Claude Code jako współprogramisty.

Dlaczego Astro + Claude Code?

Połączenie Astro - jednego z najszybszych frameworków do budowania stron internetowych - z Claude Code tworzy niesamowicie produktywne środowisko rozwojowe. W tym artykule pokażę Ci, jak wykorzystać tę kombinację do stworzenia nowoczesnej, wydajnej aplikacji webowej.

Czym Jest Astro?

Astro to nowoczesny framework webowy, który:

Generuje statyczne strony dla maksymalnej wydajności
Wysyła zero JavaScript domyślnie (ale możesz dodać gdy potrzebujesz)
Wspiera wszystkie frameworki - React, Vue, Svelte w jednym projekcie
Używa Content Collections dla typesafe content management

Projekt: Blog z Astro i Claude Code

Zbudujmy razem profesjonalny blog. Claude Code pomoże nam w każdym kroku!

Krok 1: Inicjalizacja Projektu

Poproś Claude Code:

“Stwórz nowy projekt Astro z TypeScript, Tailwind CSS i content collections dla bloga”

Claude Code wygeneruje:

npm create astro@latest my-blog -- --template minimal --typescript strict
cd my-blog
npx astro add tailwind

Krok 2: Konfiguracja Content Collections

Poproś o:

“Skonfiguruj content collections dla postów blogowych z polami: title, description, pubDate, heroImage, tags”

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  type: 'content',
  schema: ({ image }) => z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    heroImage: image().optional(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

Krok 3: Layout z Dark Mode

Zapytaj Claude Code:

“Stwórz base layout z nawigacją, dark mode toggle i responsywnym designem”

---
// src/layouts/BaseLayout.astro
import { ClientRouter } from 'astro:transitions';

interface Props {
  title: string;
  description: string;
}

const { title, description } = Astro.props;
---

<!DOCTYPE html>
<html lang="pl" class="scroll-smooth">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    <meta name="description" content={description} />
    <ClientRouter />

    <script is:inline>
      // Dark mode initialization
      const theme = localStorage.getItem('theme') ||
        (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
      document.documentElement.classList.toggle('dark', theme === 'dark');
    </script>
  </head>
  <body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
    <nav class="sticky top-0 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm">
      <!-- Navigation content -->
    </nav>

    <main class="container mx-auto px-4 py-8">
      <slot />
    </main>

    <footer class="mt-16 border-t border-gray-200 dark:border-gray-800">
      <!-- Footer content -->
    </footer>
  </body>
</html>

Krok 4: Blog Post Component

Poproś:

“Stwórz komponent BlogCard z hover effects, image optimization i responsive layout”

---
// src/components/BlogCard.astro
interface Props {
  title: string;
  description: string;
  pubDate: Date;
  heroImage?: string;
  href: string;
  tags: string[];
}

const { title, description, pubDate, heroImage, href, tags } = Astro.props;
---

<article class="group relative overflow-hidden rounded-xl border border-gray-200 dark:border-gray-800 hover:shadow-xl transition-all duration-300">
  {heroImage && (
    <div class="aspect-video overflow-hidden">
      <img
        src={heroImage}
        alt={title}
        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
        loading="lazy"
      />
    </div>
  )}

  <div class="p-6">
    <time class="text-sm text-gray-500 dark:text-gray-400">
      {pubDate.toLocaleDateString('pl-PL', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })}
    </time>

    <h3 class="mt-2 text-xl font-bold group-hover:text-blue-600 dark:group-hover:text-blue-400">
      <a href={href} class="stretched-link">
        {title}
      </a>
    </h3>

    <p class="mt-2 text-gray-600 dark:text-gray-400 line-clamp-3">
      {description}
    </p>

    <div class="mt-4 flex flex-wrap gap-2">
      {tags.map(tag => (
        <span class="px-3 py-1 text-sm rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300">
          {tag}
        </span>
      ))}
    </div>
  </div>
</article>

Krok 5: Dynamic Blog Routes

Zapytaj:

“Stwórz dynamic routes dla postów blogowych z static site generation”

---
// src/pages/blog/[...slug].astro
import { type CollectionEntry, getCollection } from 'astro:content';
import BlogPost from '@/layouts/BlogPost.astro';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: post,
  }));
}

type Props = CollectionEntry<'blog'>;

const post = Astro.props;
const { Content } = await post.render();
---

<BlogPost {...post.data}>
  <Content />
</BlogPost>

Optymalizacje Performance

1. Image Optimization

Claude Code może pomóc skonfigurować automatyczną optymalizację obrazów:

// astro.config.mjs
export default defineConfig({
  image: {
    service: {
      entrypoint: 'astro/assets/services/sharp',
    },
  },
});

2. View Transitions

Dodaj płynne przejścia między stronami za pomocą komponentu ClientRouter:

---
import { ClientRouter } from 'astro:transitions';
---
<head>
  <ClientRouter />
</head>

3. Partial Hydration

Użyj komponentów interaktywnych tylko tam, gdzie potrzeba:

<SearchComponent client:only="react" />
<CommentSection client:visible />

Deployment na Vercel/Netlify

Claude Code pomoże też z deploymentem:

# Poproś: "Przygotuj projekt do deployu na Vercel"
npm run build
# Wszystko gotowe! Build w folderze dist/

Najlepsze Praktyki

1. Struktura Projektu

src/
├── components/     # Reusable components
├── content/        # Content collections
│   └── blog/       # Blog posts
├── layouts/        # Page layouts
├── pages/          # Routes
└── styles/         # Global styles

2. TypeScript Strict Mode

Włącz strict mode dla bezpieczeństwa typów:

{
  "compilerOptions": {
    "strict": true,
    "strictNullChecks": true
  }
}

3. SEO i Accessibility

Zawsze dodawaj:

Meta descriptions
Alt texts dla obrazów
Semantic HTML
ARIA labels gdzie potrzeba

Rezultaty

Po wdrożeniu tych praktyk, Twoja aplikacja Astro będzie:

Błyskawicznie szybka - 90+ Lighthouse score
SEO-friendly - doskonała indeksacja
Accessible - dostępna dla wszystkich
Developer-friendly - łatwa w utrzymaniu

📚 Dokumentacja i Zasoby

Oficjalna Dokumentacja

Powiązane Artykuły

Podsumowanie

Astro + Claude Code to kombinacja, która pozwala tworzyć nowoczesne aplikacje webowe w ułamku czasu. Claude Code zajmuje się boilerplate, a Ty możesz skupić się na funkcjonalnościach i designie.

Gotowy do rozpoczęcia swojego projektu? Pobierz starter template i zacznij budować już dziś!

Chcesz zobaczyć więcej? Sprawdź nasze przykładowe projekty na GitHub!