Open sourceActive

Qwik City

Meta-framework for Qwik providing file-based routing, layouts, data loading, and server endpoints.

Field note

What it does

Qwik City is a meta-framework for Qwik, comparable to Next.js for React. It adds routing, middleware, endpoints, and data fetching on top of Qwik's component model.

Capabilities

Available capabilities

File-based routing Static Site Generation Middleware SPA navigation Document head management Route mocking for testing Document head management Server loaders Server-side Rendering Caching Server actions Nested layouts Google Structured Data Data Loading Dynamic head functions

Actions

Provide a way for the component to request the server to perform an action.

Components

Content projection

CSS Modules

Endpoints

Define data endpoints for RESTful API, GraphQL API, JSON, XML, or reverse proxy.

Layouts

Define common shared page layouts reused across pages.

Loaders

Fetch data on the server to be used by the component.

Qwik in a nutshell

Reactive state

Rendering a list of items

Reusing event handlers

Routing

Define application routes with directory-based routing, supporting MPA and SPA models.

$(...) rules

Rules of use hooks

server$

A simple way to execute logic on the server.

Styling

useSignal(initialValue?)

useStore(initialValue?)

Validators

Provide a way for validating actions and loaders.