Skip to main content

Acro Media NextJS starter kit

Description​

Sets up NextJS with pre-configurations used by Acro Media, supporting both App Router and Pages Router.

These include but not limited to:

  • .gitlab-ci.yml
  • .eslintrc and .prettierrc created with Acro configurations
  • cypress.config.ts with support for component testing and code coverage
  • commitlint.config.js with commitlint configuration
  • lagoon configurations
  • i18n configuration with next-i18next
  • packages:
    • Json normalizer
    • Cypress test framework
    • axios
    • commitlint
    • commitizen
    • eslint plugins
    • husky

How to use​

Access this via the global gesso script

  • pnpm create @acromedia/gesso PROJECT_NAME

Router Selection​

The package supports both Next.js routing patterns:

  • Pages Router (default): Traditional pages/ directory structure
  • App Router: Modern app/ directory structure with React Server Components

The router can be selected via the --appRouter flag in create-gesso or the router option when using the package directly.

Working with the package​

Template Structure​

The package uses a T3-app inspired template pattern:

template/
├── base/                    # Shared files (router-agnostic)
│   ├── src/components/      # Common components
│   ├── src/lib/            # Shared utilities
│   ├── package.json        # Base dependencies
│   └── ...
└── extras/
    ├── src/
    │   ├── app/            # App Router specific files
    │   │   ├── layout.tsx
    │   │   ├── page.tsx
    │   │   └── providers/  # Provider variants
    │   ├── pages/          # Pages Router specific files
    │   │   ├── _app/       # _app.tsx variants
    │   │   ├── _document.tsx
    │   │   └── index.tsx
    │   └── layout/         # Pages Router layout
    │       └── variants/   # Layout variants
    ├── commerce/           # Commerce platform extras
    │   ├── templates/      # Common commerce files
    │   ├── bigcommerce/    # BigCommerce specific
    │   ├── shopify/        # Shopify specific
    │   └── snippets/       # Import/prop snippets
    ├── cms/                # CMS platform extras
    ├── erp/                # ERP platform extras
    ├── ai/                 # AI platform extras
    ├── cypress/            # Cypress test configuration
    └── lagoon/             # Lagoon deployment config

Variant System​

Complex files that change based on platform selection use variants:

  • _app/base.tsx - Basic _app without providers
  • _app/with-providers.tsx - _app with platform provider wrappers
  • layout/variants/base.tsx - Basic layout
  • layout/variants/with-commerce.tsx - Layout with cart and commerce navigation

Snippet Injection​

Platform-specific imports and props are injected via snippets:

extras/commerce/snippets/
├── _app-imports.ts      # Import statements for Pages Router
├── _app-props.ts        # Props for Pages Router
├── providers-imports.ts # Import statements for App Router
└── providers-props.ts   # Props for App Router

Platform Overrides​

Some files are completely replaced when a platform is selected:

  • extras/cms/templates/next.config.mjs - Adds CMS redirects
  • extras/commerce/templates/src/lib/utils/menu-data.tsx - Commerce-aware navigation