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.
routes
directory
The 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.)
routes
directory example
Sample 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!</>;
});