Skip to content

Commit 5fd9cf1

Browse files
mythzmythz
committed
Update next-static.mdx
1 parent 523c5fe commit 5fd9cf1

File tree

2 files changed

+163
-26
lines changed

2 files changed

+163
-26
lines changed

‎content/docs/templates/next-rsc.mdx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ A modern full-stack .NET 10.0 + Next.js 16 project template that combines the po
1616
name="Next.js RSC Template"
1717
/>
1818

19-
2019
## Quick Start
2120

2221
```bash

‎content/docs/templates/next-static.mdx‎

Lines changed: 163 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,187 @@
11
---
22
title: Next.js Static
3-
description: The next-static template for Vibe Coding
3+
description: Full Next.js Static Export UI with .NET 10 Identity Auth Template back-end APIs
44
---
55

6-
# Next.js Static Template
6+
# .NET 10 Next.js Static Export Identity Auth Template
77

8-
The `next-static` template is designed for building high-performance, static websites using Next.js and ServiceStack. It combines the SEO benefits of Static Site Generation (SSG) with the dynamic capabilities of a .NET backend.
8+
import TemplateIntro from '@/components/template-intro';
99

10-
## Features
10+
A modern full-stack .NET 10.0 + Next.js 16 project template that combines the power of ServiceStack with Next.js static site generation and React 19. It provides a production-ready foundation for building scalable web applications with integrated authentication, database management, and background job processing.
1111

12-
- **Next.js SSG**: Pre-render pages at build time for blazing fast load speeds.
13-
- **ServiceStack Backend**: Full .NET 8 Web API with AutoQuery, Auth, and more.
14-
- **Tailwind CSS**: Rapid styling with utility classes.
15-
- **TypeScript**: End-to-end type safety.
16-
- **Docker Support**: Ready for deployment with Docker and Kamal.
12+
<TemplateIntro
13+
image="https://raw.githubusercontent.com/ServiceStack/docs.servicestack.net/main/MyApp/wwwroot/img/pages/react/next-static.webp"
14+
repo="https://github.com/NetCoreTemplates/next-static"
15+
demo="https://next-static.react-templates.net"
16+
name="Next.js Static Template"
17+
/>
1718

18-
## Project Structure
19-
20-
The project is organized into a clean monorepo structure:
19+
## Quick Start
2120

22-
- `MyApp/`: The ASP.NET Core backend.
23-
- `MyApp.Client/`: The Next.js frontend application.
24-
- `MyApp.ServiceModel/`: Shared DTOs.
25-
- `MyApp.ServiceInterface/`: Service implementations.
21+
```bash
22+
npx create-net next-static MyProject
23+
```
2624

2725
## Getting Started
2826

29-
To create a new project with this template:
27+
Run Server .NET Project (automatically starts both .NET and Next.js dev servers):
3028

3129
```bash
32-
npx create-net next-static ProjectName
30+
cd MyProject
31+
dotnet watch
3332
```
3433

35-
### Development
34+
## Architecture
3635

37-
Run the following command to start both the backend and frontend in development mode:
36+
### Hybrid Development Approach
3837

39-
```bash
40-
dotnet watch
38+
This template uses a hybrid architecture that optimizes for both development speed and production performance:
39+
40+
**Development Mode:**
41+
42+
![](https://raw.githubusercontent.com/ServiceStack/docs.servicestack.net/refs/heads/main/MyApp/wwwroot/img/pages/react/info/next-static-dev.svg)
43+
44+
- ASP.NET Core proxies requests to Next.js dev server (running on port 3000)
45+
- Hot Module Replacement (HMR) support for instant UI updates
46+
- WebSocket proxying for Next.js HMR functionality
47+
48+
**Production Mode:**
49+
50+
![](https://raw.githubusercontent.com/ServiceStack/docs.servicestack.net/refs/heads/main/MyApp/wwwroot/img/pages/react/info/next-static-prod.svg)
51+
52+
- Next.js app is statically exported to `/dist`
53+
- Static files served directly from ASP.NET Core's `/wwwroot`
54+
- No separate Node.js server required in production
55+
56+
## Core Technologies
57+
58+
### Frontend (Next.js 16 + React 19)
59+
- **Next.js** with static export capability
60+
- **Tailwind CSS 4.x** - Utility-first styling with PostCSS
61+
- **TypeScript** - Type-safe development
62+
- **Vitest** - Modern testing framework
63+
- **ServiceStack React Components** - Pre-built UI components
64+
65+
### .NET Frontend (Integrated + Optional)
66+
- **Razor Pages** - For Identity Auth UI (`/Identity` routes)
67+
68+
### Backend (.NET 10.0)
69+
- **ServiceStack 10.x** - High-performance web services framework
70+
- **ASP.NET Core Identity** - Complete authentication & authorization system
71+
- **Entity Framework Core** - For Identity data management
72+
- **OrmLite** - ServiceStack's fast, lightweight Typed ORM for application data
73+
- **SQLite** - Default database (easily upgradable to PostgreSQL/SQL Server/MySQL)
74+
75+
## Major Features
76+
77+
### 1. Authentication & Authorization
78+
- ASP.NET Core Identity integration with role-based access control
79+
- Custom user sessions with additional claims
80+
- Admin users feature for user management at `/admin-ui/users`
81+
- Email confirmation workflow (configurable SMTP)
82+
- Razor Pages for Identity UI (`/Identity` routes)
83+
- Credentials-based authentication
84+
85+
### [2. AutoQuery CRUD](#autoquery-crud-dev-workflow)
86+
- Declarative API development with minimal code
87+
- Complete Auth-protected CRUD operations (see Bookings example at `/bookings-auto`)
88+
- Automatic audit trails (created/modified/deleted tracking)
89+
- Built-in validation and authorization
90+
- Type-safe TypeScript DTOs auto-generated from C# models
91+
92+
### 3. Background Jobs
93+
- `BackgroundsJobFeature` for async task processing
94+
- Command pattern for job execution
95+
- Email sending via background jobs
96+
- Recurring job scheduling support
97+
- Upgradable to `DatabaseJobsFeature` for enterprise RDBMS
98+
99+
### 4. Developer Experience
100+
- **Admin UI** at `/admin-ui` for App management
101+
- **Health checks** at `/up` endpoint
102+
- **Modular startup** configuration pattern
103+
- **Code-first migrations** with OrmLite
104+
- **Docker support** with container publishing
105+
- **Kamal deployment** configuration included
106+
107+
### 5. Production Features
108+
- Static asset caching with intelligent cache invalidation
109+
- Clean URLs without `.html` extensions
110+
- HTTPS redirection and HSTS
111+
- Data protection with persistent keys
112+
- Health monitoring
113+
- Database developer page for EF Core errors
114+
115+
## Project Structure
116+
117+
```
118+
MyApp/ # Main ASP.NET Core host
119+
├── Configure.*.cs # Modular startup configuration
120+
├── Program.cs # Application entry point
121+
└── wwwroot/ # Static files (production)
122+
123+
MyApp.Client/ # Next.js frontend application
124+
├── app/ # Next.js App Router pages
125+
├── components/ # React components
126+
├── lib/ # Utilities and helpers
127+
├── public/ # Static assets
128+
├── dist/ # Build output (production)
129+
└── styles/ # Tailwind CSS styles
130+
131+
MyApp.ServiceInterface/ # Service implementations
132+
├── MyServices.cs # Example services
133+
└── Data/ # EF Core DbContext
134+
135+
MyApp.ServiceModel/ # DTOs and service contracts
136+
├── Bookings.cs # AutoQuery CRUD example
137+
└── Hello.cs # Example service contract
138+
139+
MyApp.Tests/ # Integration and unit tests
140+
141+
config/ # Deployment configuration
142+
└── deploy.yml # Kamal deployment settings
143+
144+
.github/ # GitHub Actions workflows
145+
└── workflows/
146+
├── build.yml # CI build and test
147+
├── build-container.yml # Container image build
148+
└── release.yml # Production deployment with Kamal
41149
```
42150

43-
This will launch the .NET API and the Next.js dev server, with proxying configured automatically.
151+
## Development Workflow
152+
153+
For detailed information on the development workflow, including starting development servers, generating TypeScript DTOs, database migrations, and testing, see:
154+
155+
**[Development Workflow Documentation](/autoquery/dev-workflow)**
156+
157+
## Configuration
158+
159+
For detailed configuration information, including app settings, SMTP email setup, and upgrading to enterprise databases (PostgreSQL/SQL Server/MySQL), see:
160+
161+
**[Configuration Documentation](/configuration)**
44162

45163
## Deployment
46164

47-
The template includes GitHub Actions for building and deploying your application using Kamal. It produces a single Docker image containing both the .NET backend and the static frontend assets.
165+
For deployment instructions, including Docker + Kamal setup and GitHub Actions configuration, see:
166+
167+
**[Deployment Documentation](/deployment)**
168+
169+
## AutoQuery CRUD Dev Workflow
170+
171+
For Rapid Development simple [TypeScript Data Models](https://docs.servicestack.net/autoquery/okai-models) can be used to generate C# AutoQuery APIs and DB Migrations.
172+
173+
## Ideal Use Cases
174+
175+
- SaaS applications requiring authentication
176+
- Admin dashboards with CRUD operations
177+
- Content-driven sites with dynamic APIs
178+
- Applications needing background job processing
179+
- Projects requiring both SSG benefits and API capabilities
180+
- Teams wanting type-safety across full stack
181+
182+
## Learn More
48183

49-
[View Source on GitHub](https://github.com/NetCoreTemplates/next-static)
184+
- [ServiceStack Documentation](https://docs.servicestack.net)
185+
- [Next.js Documentation](https://nextjs.org/docs)
186+
- [AutoQuery CRUD](https://docs.servicestack.net/autoquery-crud)
187+
- [ServiceStack Auth](https://docs.servicestack.net/authentication-and-authorization)

0 commit comments

Comments
 (0)