Skip to content

Commit 1aa5577

Browse files
committed
add wizard screenshot and conclusion section
1 parent 369b4a6 commit 1aa5577

3 files changed

Lines changed: 16 additions & 1 deletion

File tree

docs/working-notes/todo5.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,7 @@ https://github.com/ncdai/chanhdai.com
1212

1313
[Shiki] 10 instances have been created. Shiki is supposed to be used as a singleton, consider refactoring your code to cache your highlighter instance; Or call `highlighter.dispose()` to release unused instances.
1414
src/libs/integrations/expressive-code.ts
15+
16+
replace scp github action with rsync
17+
https://github.com/Burnett01/rsync-deployments
18+
73.1 KB
Loading

src/content/post/2026/02-22-vercel-deploy-fastapi-nextjs/index.mdx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { IMAGE_SIZES } from '../../../../constants/image';
2222
import DeploymentDiagramImage from '../../../../content/post/2026/02-22-vercel-deploy-fastapi-nextjs/_images/vercel-fastapi-nextjs.png';
2323
import FrontendScreenshotImage from '../../../../content/post/2026/02-22-vercel-deploy-fastapi-nextjs/_images/frontend-screenshot-1200x630.png';
2424
import BackendScreenshotImage from '../../../../content/post/2026/02-22-vercel-deploy-fastapi-nextjs/_images/backend-screenshot-1200x630.png';
25+
import VercelButtonWizardScreenshotImage from '../../../../content/post/2026/02-22-vercel-deploy-fastapi-nextjs/_images/vercel-button-wizard-screenshot.png';
2526

2627
## Introduction
2728

@@ -672,7 +673,9 @@ URL-encode the frontend button's URL and embed it in the markdown (or HTML).
672673
[![Deploy frontend to Vercel](https://vercel.com/button)](urlencoded-url-from-above)
673674
```
674675

675-
wizard screenshot
676+
After clicking the "Vercel Deploy" button, the user will be taken to a form wizard, as shown below.
677+
678+
<Image {...IMAGE_SIZES.FIXED.MDX_MD} src={VercelButtonWizardScreenshotImage} alt="Vercel button wizard" />
676679

677680
## Completed code
678681

@@ -714,6 +717,14 @@ https://github.com/nemanjam/full-stack-fastapi-template-nextjs/compare/vercel-de
714717
https://github.com/nemanjam/full-stack-fastapi-template-nextjs/compare/45c840d48cba2aeab07e0a66f8245110b852571e...e5fa4b4af3c19c8c2c584fe437b7298f9e342083
715718
```
716719

720+
## Conclusion
721+
722+
Vercel is quite viable option to host full-stack FastAPI, Next.js demo projects for free. It works well when the project is designed around serverless constraints. Keeping the backend and frontend as separate deployments, using environment variables consistently, and handling database migrations manually results in a setup that is simple, predictable, and reliable on the free tier.
723+
724+
This guide focused on one practical approach that is easy to reproduce and debug. With the provided repository and Vercel Deploy buttons, you can use this setup as a solid baseline for demos, prototypes, or small production projects.
725+
726+
Have you done something similar yourself and used a different approach? Leave a comment below, I'm happy to hear your opinions.
727+
717728
## References
718729

719730
- Vercel docs, supported runtimes https://vercel.com/docs/functions/runtimes

0 commit comments

Comments
 (0)