Filenames

By default, filenames should match the name of the declaration being exported (both the text and the casing). 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

PascalCase, .tsx

Components

• Filename:

  • NounAdjective.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/NounAdjective/NounAdjective.tsx

      • // TODO: Learn more about Storybookizing components here

    • Non-Storybookized: components folder

      • standalone, simple:

        • ~/components/NounAdjective.tsx

      • standalone, complex:

        • ~/components/NounAdjective/NounAdjective.tsx

        • Learn more about "component folders" here
      • folder of related components:

        • ~/components/relatedComponents/NounAdjective.tsx

  • local: _components folder

    • ComponentFolder/_components/NounAdjective.tsx

    • Learn more about "local" components here

---

Non-Components

camelCase, .ts (generally)

Helper functions

• Filename:

  • functionName.ts (.tsx as needed)

• Declaration:

  • export function functionName() {...}

• Location:

  • reusable/app-wide: helpers folder

    • ~/helpers/functionName.ts

  • local: _lib folder

    • ComponentFolder/_lib/functionName.ts

Hooks

• Filename:

  • useX.ts (.tsx as needed)

• Declaration:

  • export function useX() {...}

• Location:

  • reusable/app-wide: hooks folder

    • ~/hooks/useX.ts

  • local: _lib folder

    • ComponentFolder/_lib/useX.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

    • ComponentFolder/_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

    • ComponentFolder/_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

    • ComponentFolder/_lib/constants.ts