File Structure

    Guiding Principles

    1. Files that change together should live together.
    2. Minimal requirements, maximum flexibility

    Example file structure

    app

    • The file structure nested inside app can be anything you want, but we recommend the following:
    • Typically you will have two types of “container” directories inside app that can be nested or combined any way you want:
      • entity directories like projects/ and tasks/
      • context directories like marketing/ or admin/.

    db

    Contains database configuration, schema, and migration files.

    db/index.js exports your initialized database client so you can use it anywhere in your app.

    integrations

    Contains third-party integration code. Ex:

    auth0.js, twilio.js, etc. These files are a good place to instantiate a client with shared configuration.

    pages

    pages folder and all nested pages folders inside are merged together at build time. The build will fail if the same route is defined in two places.

    • This top level pages directory is optional.
    • Has the same semantics as the Next.js pages folder. All files in here are mapped to the url corresponding to their file paths.
    • While you can place any route files here, we recommend placing route files inside app. But if you want, you can instead place all your route files in this top level folders instead of being spread out in various directories inside app

    api

    Same as Next.js

    pages/api folder, but not nested inside pages.

    And like the

    public

    All files in here are served statically from your app’s root URL

    utils

    Contains all those pesky little files and functions every project accumulates

    blitz.config.js

    A configuration file with the same format as

    next.config.js

    • All top level folders are automatically aliased. So for example you can import from app/projects/queries/getProject from anywhere in our app.