A minimal template showcasing React Router integration within Next.js for client-side routing

git clone https://github.com/rudrodip/nexfaster
cd nexfaster
bun install
bun dev

Open http://localhost:3000 to see the app.

NexFaster combines Next.js with React Router for pure client-side routing:

1. Route Redirection: All routes redirect to /shell via next.config.ts
2. Shell Loading: Shell page loads React Router app with ssr: false
3. Client Routing: React Router handles all navigation client-side

• next.config.ts - Route redirection configuration
• src/app/shell/page.tsx - Loads React Router app
• src/frontend/app.tsx - Main React Router application
• src/config/site.config.ts - Site configuration
• src/components/boilerplate.tsx - Layout and page components

Add new routes in src/frontend/app.tsx:

<Route path="/your-page" element={<YourPage />} />

• ⚡ Lightning fast client-side routing
• 🎯 Zero-config React Router integration
• 🎨 Modern UI with Tailwind CSS
• 🌙 Dark mode support
• 📱 Responsive design
• 🔧 TypeScript support

• Framework: Next.js 15
• Routing: React Router 7
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Icons: Lucide React
• Language: TypeScript

<Route path="/products" element={<ProductList />} />
<Route path="/products/:id" element={<ProductDetail />} />
<Route path="/cart" element={<ShoppingCart />} />

<Route path="/dashboard" element={
  <ProtectedRoute>
    <Dashboard />
  </ProtectedRoute>
} />

<Route path="/admin" element={<AdminLayout />}>
  <Route path="users" element={<UserManagement />} />
  <Route path="settings" element={<Settings />} />
</Route>

Contributions are welcome! Please feel free to submit a Pull Request.

BSD Zero Clause License - see LICENSE for details.

Created by rds_agi • GitHub • Twitter