File Layout

The core responsibility of Qwik City is to provide a simple, intuitive, and efficient way to create content for your site. Qwik City achieves this through directory-based routing. In a nutshell layout of your directories determines the structure of your site.

The routes directory

All directory-based route information is placed in src/routes directory. This is the only directory where directory and file naming conventions have implications for your site. (In all other folders, the names have no meaning to Qwik City.)

(the src folder also typically contains components, but the name and location have no meaning to Qwik City.)

Sample routes directory example

──src/
  ├─components/          # Put your reusable components here.
  │ └─counter.tsx
  └─routes/              # Put your route-specific components here.
    ├─docs/
    │ ├─overview/
    │ │ └─index.mdx      # https://example.com/docs/overview
    │ └─index.mdx        # https://example.com/docs
    ├─index.tsx          # https://example.com/
    └─layout.tsx         # All nested pages use this layout

Sample Component

Qwik City expects that index.tsx files that are in the src/routes folder have a default export.

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

export default component$(() => {
  return <>Hello World!</>;
});