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.
- 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
# 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
git clone https://github.com/Rolemodel/betanxt-protoype-template.git my-project
cd my-project
npm install
-
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
-
Install dependencies:
npm install
The BetaNXT design system will be automatically installed and the theme applied.
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
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
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
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
insrc/components/ThemeProvider.tsx
- Fallback Support: Works with or without BetaNXT - graceful fallbacks included
Setup Required:
- Configure
.npmrc
with your GitHub token (see Environment Setup below) - Run
npm install
- BetaNXT theme will be automatically applied - Import components directly:
import { Button } from '@rolemodel/betanxt-design-system'
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
- Strict mode enabled
- Path aliases configured (
@/
points tosrc/
) - Next.js specific types included
- Next.js recommended rules
- TypeScript integration
- Customizable rules in
.eslintrc.json
- App Router configuration
- TypeScript support
- Optimized builds
- Font optimization for Roboto
npm install -g vercel
vercel
-
Build the application:
npm run build
-
Start the production server:
npm start
- Next.js Documentation
- Material-UI Documentation
- TypeScript Documentation
- BetaNXT Design System - Replace with actual documentation link
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
- 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