Building a Stable Next.js Backend
October 19, 2025
When creating a portfolio application, the goal is not just to have a beautiful frontend, but to implement a stable, and feature-rich backend to manage content, track user engagement, and handle communication. This article breaks down the architectural decisions and key services that power my Next.js portfolio, leveraging its native API Routes feature alongside Google Firebase and external APIs for a truly modern experience.
The Central Hub: Next.js API Router
The foundation of this architecture is the Next.js API Router. Instead of deploying a separate server (like Node/Express), the API Router acts as the single-entry point for all incoming user requests. This approach offers significant advantages:
- Unified Deployment: I deployed the entire stack, frontend and backend, as a single unit.
- Zero-Configuration Routing: Next.js handles the mapping of API file paths (e.g., /api/articles) to the downstream services, allowing the router to focus solely on inspecting the request's path, method (GET, POST), and then directing that request to the appropriate internal service handler.
- Seamless Integration: It sits between the user's browser and my core business logic, providing a clean separation of concerns.
Service 1: The Articles Service (Secure Content Management)
This service is solely responsible for handling my portfolio's core written content, requiring robust security measures for creation and editing. For content creation (/api/articles/write), security is paramount. The flow is strictly controlled:
- A request to write or edit an article hits the API Router.
- The Articles Service immediately checks if the user is authenticated.
- If authentication fails, the request is directed through a Firebase Authentication gateway to ensure the logged-in user has the correct permissions.
- Only an authenticated user can perform the final Database Write operation to store the article.
Service 2: LeetCode Data Service (External API Caching)
A key feature is displaying up-to-date competitive programming stats from the LeetCode API. To avoid hitting the external API on every page load, this dedicated service manages a time-based caching strategy. The cache is deemed valid only if its update timestamp is less than 30 days old. If the data is stale, the system invalidates the cache, fetches fresh data, and performs a Cache Update in Firebase.
Service 3: Contact Form Service (Anti-Spam Cooldown)
Handling contacts requests efficiently while preventing spam is crucial. This service implements a 24-hour request cooldown per user to prevent abuse. If a recent message is found, the application displays a cooldown message. If not, the system sends an email notification and stores a timestamp to begin the next cooldown period.
Service 4: Event Tracking Service
To understand how visitors use the portfolio, any meaningful user action (e.g., "article_opened," "project_clicked") triggers the service. The Event Tracking Service forwards the raw event data to the dedicated Analytics Platform (Mixpanel), allowing for behavioral analysis and funnel tracking.
Key Technology Decisions: Why I Chose My Stack
My technology choices were driven by the need for quick development, high stability, and seamless integration within the Next.js and serverless ecosystem.
| Feature | Firebase (Firestore) | Other Databases | My Rationale |
|---|---|---|---|
| Setup & Maintenance | Serverless, fully managed, zero setup time. | Requires server provisioning, connection management, and scaling efforts. | Rapid Prototyping: I needed a zero-config solution that scales automatically. |
| Real-time Capabilities | Built-in real-time listeners for instant content updates. | Requires setting up WebSockets or polling mechanisms. | Developer Experience: Simplifies complex real-time features with minimal code. |
| Integration | Deeply integrated with Firebase Authentication and Hosting. | Requires manual setup of separate auth and hosting services. | Ecosystem: Seamless, native integration with the rest of my chosen stack. |
| Feature | Mixpanel | Google Analytics (GA4) | My Rationale |
|---|---|---|---|
| Focus | Primarily focused on user behavior, events, and funnels (Action-centric). | Primarily focused on traffic, page views, and sessions (Volume-centric). | Behavioral Insight: Mixpanel"s event-driven model is better for optimizing user journeys. |
| Data Model | Event-based from the ground up, making custom event properties easier to manage. | Requires more effort to define and track complex custom events. | Granularity: I can track micro-interactions with precision. |
| Simplicity in Reporting | Funnels and Cohorts are native and highly visual. | Requires more complex configurations for deep behavioral analysis. | Clarity: It offers immediate, clear visual reports on conversion and retention. |
| Feature | Firebase Authentication | Custom JWT Authentication | My Rationale |
|---|---|---|---|
| Speed to Implement | Ready-to-use SDKs and UI components. | Requires building user databases, hashing passwords, generating tokens, etc. | Time Savings: Reduces development time from weeks to hours. |
| Security & Maintenance | Managed by Google; handles encryption, password recovery, and vulnerability patching. | Requires continuous vigilance to maintain security and rotate keys. | Security Assurance: I trust Google"s security engineers over building my own system. |
| Provider Support | Supports Google, GitHub, Email/Password, etc., out-of-the-box. | Each new provider (OAuth) requires setting up dedicated endpoints. | Flexibility: Easy to add other login options in the future. |
By structuring the backend around Next.js API Routes and delegating specialized tasks to four distinct services—content security, external API caching, anti-spam logic, and analytics, I achieved a highly maintainable and scalable portfolio. This architecture provides a robust foundation that is ready to handle growth and future feature development. I"m excited to hear your thoughts on this updated structure! It now better aligns with the independent roles of your LeetCode and Articles components.