Qwik City (routing)

aka. Qwik Router

Learning Qwik and Qwik City are not two different things, Qwik City is built on top of Qwik, bringing opinionated routing and goodies to make your life easier.

Qwik¹ City²

Qwik¹: Core framework, stable, primitives, component model.

City²: Opinionated file-based router, build fast.

We call it a meta-framework for Qwik. Qwik City is to Qwik, what Next.js is to React, what Nuxt is to Vue, or SvelteKit to Svelte.

Qwik (core) and Qwik City (routing) solve problems at two layers of abstraction. Qwik can stay stable, without breaking changes, focusing on long-term and stable primitives, while Qwik City brings an opinionated and performant way to build sites at scale. We don't want to lock the ecosystem into a single correct way of building sites, in fact we encourage the community to build alternative solutions on top of Qwik.

As a user, using Qwik City today for your app is a no-brainer. Thanks to Qwik architecture, it comes with zero overhead, meaning that no extra JS will be delivered to the browser.

Use Qwik City to build an e-commerce website, blog site, or any other website that needs routing, layouts, templating, or data retrieval/updates. Qwik City is built on Qwik, and therefore Qwik City sites are resumable and only download the minimal amount of JavaScript with fine-grained lazy loading.

Qwik City provides:

  • Directory-based routing
  • Nested layouts
  • File-based menus
  • Breadcrumbs
  • Support authoring content with .tsx or .mdx file formats
  • Data endpoints

By default, Qwik City sites are fast because they:

  • Are resumable
  • Download minimal JavaScript
  • Come with Partytown

To follow along with this guide, run the Qwik CLI in your command line:

npm create qwik@latest

When prompted, choose a name for your project and Basic as your starter.

Note: the start script attempts to launch the site in system’s browser, which in headless environments (e.g., within a container) could cause the command to fail with an error. Edit package.json to remove the --open flag.

Made with ❤️ by