BetaNXT Prototype Template

A modern Next.js boilerplate with Material-UI v7 and BetaNXT design system integration. This template provides a production-ready starting point for building React applications with the latest tools and best practices.

🚀 Features

• Next.js 15 - App Router, Server Components, and React 19 support
• Material-UI v7 - Latest version with CSS variables and improved theming
• TypeScript - Full type safety with strict configuration
• BetaNXT Design System - Ready for private GitHub registry integration
• Modern Styling - Emotion with CSS variables and theme customization
• Production Ready - Optimized build configuration and deployment setup
• Developer Experience - ESLint, path aliases, and hot reload

📦 Quick Start

Using create-next-app (Recommended)

# Create a new project using this template
npx create-next-app@latest my-project --example https://github.com/RoleModel/betanxt-prototype-template

# Navigate to project directory
cd my-project

# Remove the copied git history and initialize fresh git repo
rm -rf .git
git init
git add .
git commit -m "Initial commit"

# Install dependencies
npm install

Manual Clone

git clone https://github.com/Rolemodel/betanxt-protoype-template.git my-project
cd my-project
npm install

Environment Setup

1. Set up GitHub Token for BetaNXT Design System:

   Create a .env.local file and add your GitHub personal access token:

   GITHUB_TOKEN=your_personal_access_token_here

   Or export it in your shell:

   export GITHUB_TOKEN=your_personal_access_token

2. Install dependencies:

   npm install

   The BetaNXT design system will be automatically installed and the theme applied.

Development

npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint
npm run type-check   # Run TypeScript checks

📁 Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── layout.tsx         # Root layout with MUI setup
│   ├── page.tsx           # Home page
│   └── examples/          # Component examples
├── components/
│   ├── BetaNXT/           # BetaNXT design system integration
│   └── examples/          # Example components
├── theme/
│   └── index.ts           # MUI theme configuration
├── types/                 # TypeScript type definitions
├── lib/                   # Utility functions
└── styles/                # Global styles

🎨 Theming and Customization

Material-UI Theme

The theme is configured in src/theme/index.ts with:

• CSS variables enabled for better SSR and theming
• Roboto font integration with Next.js font optimization
• Dark mode support ready

BetaNXT Integration

The BetaNXT design system (@rolemodel/betanxt-design-system) is pre-configured and ready to use:

• Automatic Theme Integration: BetaNXT theme is automatically loaded in src/theme/index.ts
• Theme Provider: Custom BetaNXTThemeProvider in src/components/ThemeProvider.tsx
• Fallback Support: Works with or without BetaNXT - graceful fallbacks included

Setup Required:

1. Configure .npmrc with your GitHub token (see Environment Setup below)
2. Run npm install - BetaNXT theme will be automatically applied
3. Import components directly: import { Button } from '@rolemodel/betanxt-design-system'

CSS Variables

This template uses MUI's CSS variables feature for:

• Better server-side rendering performance
• Easier theme switching and customization
• Reduced bundle size
• Improved runtime performance

🔧 Configuration

TypeScript

• Strict mode enabled
• Path aliases configured (@/ points to src/)
• Next.js specific types included

ESLint

• Next.js recommended rules
• TypeScript integration
• Customizable rules in .eslintrc.json

Next.js

• App Router configuration
• TypeScript support
• Optimized builds
• Font optimization for Roboto

🚀 Deployment

Vercel (Recommended)

npm install -g vercel
vercel

Other Platforms

1. Build the application:

   npm run build

2. Start the production server:

   npm start

🔗 Useful Links

• Next.js Documentation
• Material-UI Documentation
• TypeScript Documentation
• BetaNXT Design System - Replace with actual documentation link

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

• Check the Issues for common problems
• Create a new issue for bugs or feature requests
• Consult the Material-UI and Next.js documentation for framework-specific questions

---

Made with ❤️ using Next.js, Material-UI, and BetaNXT Design System