Skip to content
FRAME / docs

Search is only available in production builds. Try building and previewing the site to test it out locally.

Logical Architecture

The logical architecture of @frame/next is firmly based on the Next.js 16 App Router pattern, with a strict separation between Server Components and Client Components.

Directory structure

Section titled “Directory structure”

Our structure promotes modularity and separation of concerns:

  • proxy.ts: Single middleware entry point. All rewrites, HTTP headers, and session validation go through here (it replaced middleware.ts in Next.js 16).
  • app/[locale]/: Main router directory. All routes nest under a [locale] language parameter for internationalization (i18n).
    • (app)/(auth)/: Authentication-related routes (sign-in, sign-up, password reset, etc.).
    • (app)/(public)/: Public pages (such as “Privacy Policy”, “Terms of Service”, etc.).
    • (app)/(private)/: Private areas that use the @frame/auth SDK for authentication.
  • src: Source code directory.
    • components/: Shared components (ui, layout, navbar, sidebar, footer).
    • modals/: Modal screen implementations.
    • hooks/: Shared React hooks.
    • lib/: Application services (api, prompt, modal-manager) and pure utilities.
    • state/: Global state with zustand.
    • types/: Global type declarations.
    • modules/: Domain-scoped logic (auth, hub, admin, i18n, pricing). Each module may have its own components/ and utilities.
    • visual/: Global styles, themes, and fonts.

Internationalization

Section titled “Internationalization”

@frame/next uses next-intl for internationalization (i18n). Dictionaries are stored in messages/{locale}.json. The default canonical language is Spanish.