2. Установка (Qwik City)

Qwik City — это мета-фреймворк поверх Qwik, аналог Next.js для React. Он предоставляет файловую маршрутизацию, SSR, SSG, API-маршруты и многое другое.

Создание проекта

Самый простой способ начать — использовать официальный CLI:

npm create qwik@latest

CLI предложит выбрать:

Название проекта — имя папки
Starter — шаблон проекта (Empty App, Basic, Storybook и т.д.)
Установить зависимости — yes/no

# Пример создания проекта
npm create qwik@latest my-qwik-app
cd my-qwik-app
npm start

Структура проекта

После создания Qwik City проекта получается следующая структура:

my-qwik-app/
├── public/              # Статические файлы (favicon, robots.txt)
├── src/
│   ├── components/      # Переиспользуемые компоненты
│   │   └── router-head/ # Head компонент для метатегов
│   ├── routes/          # Файловая маршрутизация
│   │   ├── index.tsx    # Главная страница (/)
│   │   ├── layout.tsx   # Корневой лейаут
│   │   └── service-worker.ts
│   ├── entry.ssr.tsx    # SSR точка входа
│   └── root.tsx         # Корневой компонент
├── adaptors/            # Адаптеры для деплоя (Vercel, CF, Node)
├── package.json
├── tsconfig.json
└── vite.config.ts

Ключевые файлы

`src/root.tsx`

Корневой HTML-документ приложения:

import { component$ } from '@builder.io/qwik';
import { QwikCityProvider, RouterOutlet, ServiceWorkerRegister } from '@builder.io/qwik-city';
import { RouterHead } from './components/router-head/router-head';

export default component$(() => {
  return (
    <QwikCityProvider>
      <head>
        <meta charSet="utf-8" />
        <RouterHead />
        <ServiceWorkerRegister />
      </head>
      <body lang="en">
        <RouterOutlet />
      </body>
    </QwikCityProvider>
  );
});

`src/routes/index.tsx`

Главная страница — любой файл index.tsx в routes/ это маршрут:

import { component$ } from '@builder.io/qwik';
import type { DocumentHead } from '@builder.io/qwik-city';

export default component$(() => {
  return <h1>Привет, Qwik! ⚡</h1>;
});

// SEO метаданные
export const head: DocumentHead = {
  title: 'Мой Qwik App',
  meta: [{ name: 'description', content: 'Быстрый сайт на Qwik' }],
};

`src/routes/layout.tsx`

Лейаут применяется ко всем дочерним маршрутам:

import { component$, Slot } from '@builder.io/qwik';

export default component$(() => {
  return (
    <>
      <header>Мой хедер</header>
      <main>
        <Slot /> {/* Здесь рендерится содержимое маршрута */}
      </main>
      <footer>Мой футер</footer>
    </>
  );
});

Маршрутизация

Qwik City использует файловую маршрутизацию — структура файлов = структура URL:

src/routes/
├── index.tsx           → /
├── about/
│   └── index.tsx       → /about
├── blog/
│   ├── index.tsx       → /blog
│   └── [slug]/
│       └── index.tsx   → /blog/:slug
└── api/
    └── users/
        └── index.ts    → /api/users (API маршрут)

Скрипты

npm start        # Запуск dev сервера
npm run build    # Production сборка
npm run preview  # Превью production сборки
npm run lint     # Проверка кода

Vite конфигурация

Qwik City использует Vite в качестве сборщика:

import { defineConfig } from 'vite';
import { qwikVite } from '@builder.io/qwik/optimizer';
import { qwikCity } from '@builder.io/qwik-city/vite';

export default defineConfig(() => {
  return {
    plugins: [qwikCity(), qwikVite()],
  };
});