Filenames

By default, filenames should match the name of the declaration being exported, but in kebab-case. Common exceptions include:

• Page-related files

  • page.tsx, layout.tsx (filenames are lowercase)

• Types/Interfaces

  • the file is often named types.ts and will export multiple local types

• Schemas

  • the file is often named schemas.ts and will export multiple local schemas

• Constants

  • the file is often named constants.ts and will export multiple local constants

---

Pages

We follow the NextJS v13+ folder structure [1][2]

layout.tsx

• Filename:

  • layout.tsx

• Declaration:

  • export default function Layout() {...}

• Location:

  • ~/pages/x/layout.tsx

page.tsx

• Filename:

  • page.tsx

• Declaration:

  • export default function Page() {...}

• Location:

  • ~/pages/x/page.tsx

index.ts

• Filename:

  • index.ts

• Declaration:

  • export { default } from './layout'

• Location:

  • ~/pages/x/index.ts

---

Components

kebab-case, .tsx

Components

• Filename:

  • noun-adjective.tsx

• Declaration:

  • export function NounAdjective() {...}

• Location:

  • database-related: components/database folder

    • ~/components/database/x/_components/...

    • Learn more about the "database folder" system

  • reusable/app-wide:

    • Storybookized: components/storybook folder

      • ~/components/storybook/noun-adjective/noun-adjective.tsx

      • // TODO: Learn more about Storybookizing components here

    • Non-Storybookized: components folder

      • standalone, simple:

        • ~/components/noun-adjective.tsx

      • standalone, complex:

        • ~/components/noun-adjective/noun-adjective.tsx

        • Learn more about "component folders" here

      • folder of related components:

        • ~/components/related-components/noun-adjective.tsx

  • local: _components folder

    • component-folder/_components/noun-adjective.tsx

    • Learn more about "local" components here

---

Non-Components

kebab-case, .ts (generally)

Helper functions

• Filename:

  • function-name.ts (.tsx as needed)

• Declaration:

  • export function functionName() {...}

• Location:

  • reusable/app-wide: helpers folder

    • ~/helpers/function-name.ts

  • local: _lib folder

    • component-folder/_lib/function-name.ts

Hooks

• Filename:

  • use-x.ts (.tsx as needed)

• Declaration:

  • export function useX() {...}

• Location:

  • reusable/app-wide: hooks folder

    • ~/hooks/use-x.ts

  • local: _lib folder

    • component-folder/_lib/use-x.ts

Types/Interfaces

• Filename:

  • types.ts

• Declaration:

  • database-related:

    • export type TDoc = ...

  • exported props:

    • export interface ComponentProps {...}

  • all other:

    • export interface TRelevantName {...}

• Location:

  • database-related: "router" folder

    • ~/api/routers/x/types.ts

  • reusable/app-wide: types folder

    • ~/types/x/types.ts

  • local: _lib folder

    • component-folder/_lib/types.ts

Schemas

• Filename:

  • schemas.ts

• Declaration:

  • database-related:

    • FE: schema, schemaCreate, schemaUpdate

    • BE: schemaBE, schemaBECreate, schemaBEUpdate

  • all other:

    • export const schemaX = {...}

• Location:

  • database-related "router" folder

    • ~/api/routers/x/schemas.ts)

  • reusable/app-wide: schemas folder

    • ~/schemas/x/schemas.ts)

  • local: _lib folder

    • component-folder/_lib/schemas.ts

Constants

• Filename:

  • constants.ts

• Declaration:

  • export const CONSTANT_NAME = '...' or {...} or ...

• Location:

  • database-related "router" folder

    • ~/api/routers/x/constants.ts)

  • reusable/app-wide: constants folder

    • ~/constants/x/constants.ts)

  • local: _lib folder

    • component-folder/_lib/constants.ts