A modern, secure documentation starter template built with Nextra, Next.js 15, and React 19
- Features
- Tech Stack
- Quick Start
- Installation
- Configuration
- Usage
- Project Structure
- Customization
- Documentation
- Contributing
- Issues & Support
- License
- Author
- Session-based authentication with secure JWT cookies
- Multi-user support with role-based access control
- Middleware protection for sensitive routes
- Environment-based configuration for different deployment stages
- Nextra-powered documentation with MDX support
- Full-text search powered by Pagefind indexing
- Responsive design with dark/light mode support
- Mobile-first approach for optimal viewing on all devices
- Next.js 15 with App Router and Server Components
- React 19 with latest features and optimizations
- TypeScript for type-safe development
- Hybrid rendering for optimal performance
- Hot reload in development mode
- ESLint & Prettier configuration
- Type-safe environment variables
- Comprehensive documentation and examples
| Category | Technology | Version | Purpose |
|---|---|---|---|
| Framework | Next.js | 15.x | React framework with SSR/SSG |
| UI Library | React | 19.x | Component-based UI library |
| Language | TypeScript | 5.x | Type-safe JavaScript |
| Documentation | Nextra | 4.x | Next.js-based docs framework |
| Search | Pagefind | Latest | Static site search |
| Authentication | Custom JWT | - | Session-based auth system |
| Styling | CSS Modules | - | Component-scoped styling |
Get up and running in less than 5 minutes:
# Clone the repository
git clone https://github.com/we-digital/nextra-docs-starter-plus.git
cd nextra-docs-starter-plus
# Install dependencies
pnpm install
# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your configuration
# Start development server
pnpm dev🎉 That's it! Open http://localhost:3000 and start building your documentation.
Before you begin, ensure you have the following installed:
- Node.js (v18.17.0 or higher)
- pnpm (v8.0.0 or higher) - Recommended package manager
- Git for version control
-
Clone the repository
git clone https://github.com/we-digital/nextra-docs-starter-plus.git cd nextra-docs-starter-plus -
Install dependencies
pnpm install
-
Environment setup
cp .env.example .env.local
-
Configure environment variables
# .env.local SESSION_SECRET=your-32-character-secret-key-here AUTH_USERNAME=admin AUTH_PASSWORD=your-secure-password NEXT_PUBLIC_APP_URL=http://localhost:3000
-
Start development server
pnpm dev
| Variable | Description | Required | Default |
|---|---|---|---|
SESSION_SECRET |
32-character secret for JWT signing | ✅ | - |
AUTH_USERNAME |
Admin username for authentication | ✅ | - |
AUTH_PASSWORD |
Admin password for authentication | ✅ | - |
NEXT_PUBLIC_APP_URL |
Public URL of your application | ✅ | http://localhost:3000 |
# Generate a secure session secret
openssl rand -base64 32
# Or use Node.js
node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"# Start development server
pnpm dev
# Build for production
pnpm build
# Start production server
pnpm start
# Run linting
pnpm lint
# Build search index
pnpm build:search- Add new pages in the
content/directory - Use MDX format for rich content with React components
- Update
_meta.jsfiles to configure navigation - Add images to
public/images/directory
- Visit
/loginto access the authentication page - Use the credentials configured in your
.env.localfile - Protected routes automatically redirect to login when not authenticated
nextra-docs-starter-plus/
├── 📁 app/ # Next.js App Router
│ ├── 📁 [[...mdxPath]]/ # Dynamic MDX routing
│ ├── 📁 login/ # Authentication pages
│ └── 📄 layout.jsx # Root layout
├── 📁 components/ # React components
├── 📁 content/ # MDX documentation files
│ ├── 📁 installation/ # Installation guides
│ ├── 📁 customization/ # Customization docs
│ └── 📄 index.mdx # Homepage content
├── 📁 lib/ # Utility functions
│ ├── 📄 auth-actions.ts # Authentication logic
│ ├── 📄 session.ts # Session management
│ └── 📄 theme-config.ts # Nextra configuration
├── 📁 public/ # Static assets
├── 📁 styles/ # CSS stylesheets
└── 📄 next.config.mjs # Next.js configuration
Edit lib/theme-config.ts to customize:
- Logo and branding
- Navigation structure
- Color scheme
- Footer content
- Social links
- Global styles:
styles/custom.css - Component styles: Use CSS modules or styled-components
- Nextra styling: Leverage built-in utility classes with
nx:prefix
The search functionality is powered by Pagefind and automatically indexes your content. Customize search behavior in scripts/build-pagefind-pre.js.
Comprehensive documentation is available at the following locations:
- Prerequisites & Quick Start - System requirements and setup
- Authentication Setup - Complete auth configuration
- Creating Content - Content creation guide
- Deployment - Production deployment guides
- Customization - Theming and styling guides
- Troubleshooting - Common issues and solutions
We welcome contributions to make this template even better! Here's how you can help:
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature
- Make your changes
- Commit your changes
git commit -m 'Add some amazing feature' - Push to the branch
git push origin feature/amazing-feature
- Open a Pull Request
- Follow the existing code style and conventions
- Add tests for new features when applicable
- Update documentation for any changes
- Ensure all tests pass before submitting
If you encounter any issues, please report them on our GitHub Issues page.
When reporting issues, please include:
- Clear description of the problem
- Steps to reproduce the issue
- Expected vs actual behavior
- Environment details (OS, Node.js version, browser)
- Screenshots or logs if applicable
- 📖 Documentation: Check our comprehensive docs first
- 🐛 Bug Reports: Use GitHub Issues
This project is licensed under the MIT License - see the LICENSE file for details.
MIT License
Copyright (c) 2024 Anton Petrushin
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
If this project helped you, please consider giving it a ⭐!
Made with ❤️ by we:Digital