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 file-based routing. In a nutshell layout of your files determines the structure of your site.

The routes directory

All file-based route information is placed in src/routes directory. This is the only directory where 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!</>;
});