Skip to main content

Rath Frontend Template

This repository is a lightweight frontend boilerplate powered by Next.js 16, React 19, and MUI 7. It sets up a modern React stack with out-of-the-box routing, styling, and component utilities so you can focus on shaping your UI rather than wiring tooling.

Highlights​

  • Next.js App Router – frameworks defaults to src/app and ships with the "use client" entry point shown in page.js.
  • MUI + Emotion – themeable UI primitives via @mui/material, @mui/material-nextjs, and Emotion CSS-in-JS helpers.
  • Premium data grid ready – @mui/x-data-grid-premium is installed so you can build rich admin tables without additional dependency management.
  • Shared component package – imports @tranz-rath/components, which is transpiled through next.config.mjs so you can consume it directly.
  • Migration-friendly linting – eslint configured with eslint-config-next’s Core Web Vitals rules and customized ignore list.
  • Path aliases – @/* resolves to ./src/*, making deep imports simpler.
  • Zero opinionated styles – component shell returns an empty card so you can drop in your own layout/logic quickly.

Getting Started​

  1. Install dependencies (Node.js 18+ recommended): 
    npm install
  2. Start the dev server: 
    npm run dev
    The site will be available at http://localhost:3000 by default.

Available Scripts​

  • npm run dev – launches Next.js in development mode with fast refresh and the app router.
  • npm run build – creates an optimized production build (.next/ output).
  • npm run start – serves the production build (run this after npm run build).
  • npm run lint – runs ESLint using the Next.js core web vitals configuration.

Project Layout​

.
├── public/               # Static assets served from the root URL
└── src/
    └── app/
        └── page.js       # Root client component (empty card shell + action column template)

page.js exports a client component that already imports MUI layout primitives and defines an Action column template to illustrate how @mui/material chips can link into a CRUD workflow (edit, clone, ledger routes).

Configuration Notes​

  • next.config.mjs enables the experimental React compiler and tells Next to transpile @tranz-rath/components, ensuring compatibility with the app router.
  • jsconfig.json defines the @/* alias for nicer imports from src.
  • eslint.config.mjs extends the Core Web Vitals rules and keeps Next’s default ignore patterns while allowing you to add more if needed.

Extending the Template​

  • Drop additional routes in src/app (each folder is treated as a route segment).
  • Replace the empty CardContent inside page.js with your dashboard or page content, wiring data grids, charts, or forms as needed.
  • Add theme overrides or a custom _app layout if you need global state/context providers.
  • Use public/ for favicons, fonts, or static JSON – they are served from /.

Next Steps​

  1. Wire API/data fetching (SSR or client-fetching) depending on your UX needs.
  2. Swap in global providers (ThemeProvider, localization, auth) before returning the root layout.
  3. Create sensible test coverage once the UI fills out.