Building a Marketing Site and Web App in the Same Next.js Codebase: A Practical Guide

Hook: One codebase, less friction

Running a marketing site and a web app in separate repositories means duplicated UI, out-of-sync branding, and slower releases. Next.js lets you serve both from a single codebase—giving you consistent design, simpler deploys, and faster iteration without sacrificing performance or security.

Why combine them?

Combining your marketing pages and app in one Next.js project reduces overhead and keeps your user experience unified. You get one CI pipeline, one set of shared components, and a single place to manage SEO, analytics, and environment variables. For most startups and indie hackers, this is the sweet spot between speed and maintainability.

Key benefits:

• Consistent design and shared components across marketing and product.
• Less duplication and fewer merge conflicts.
• Easier preview deployments and feature flags for both experiences.
• Unified analytics and SEO strategy.

If you want examples or a deeper walkthrough, check https://prateeksha.com/blog/nextjs-marketing-site-web-app-same-codebase or browse related posts on https://prateeksha.com/blog.

Project structure patterns

Pick a structure that fits team size and velocity. Three common approaches work well:

1. Single repository, segmented by route
2. Keep marketing pages at root (/, /about, /pricing) and app pages under a base route (/app or /dashboard).

3. Shared components, styles, and utilities live in a common folder.

4. Next.js 13+ app directory

5. Use the /app router to create independent layouts for marketing and app sections.

6. Server Components and nested layouts make performance and code separation easier.

7. Monorepo for large teams

8. Move shared design system and backend clients into packages (Turborepo or pnpm workspaces).

9. Useful when multiple teams own different parts of the product.

Quick tip: start simple with a single Next.js project. Only move to a monorepo when cross-team ownership demands it.

Routing, SEO, and protected areas

Route planning prevents surprises. Use clear base routes:

• Marketing: /, /pricing, /docs
• App: /app, /app/dashboard, /app/settings

For marketing pages, prefer Static Site Generation (getStaticProps or the new app router static rendering) to maximize SEO and performance. For app pages, use dynamic routing, server-side data fetching, and strict auth checks.

Protect app routes with middleware or higher-order components:

• Use Next.js middleware (Edge or server) to redirect unauthenticated users to /login.
• Protect API routes by validating JWTs or session cookies on the server.

Implementation tip: use the same design tokens and components for navbars, footers, and primary buttons, but swap layouts between marketing and app to keep visual separation.

Sharing components and design system

Centralize reusable UI and utilities:

• /components — shared buttons, inputs, icons
• /design — tokens, theme, spacing, colors
• /lib — API clients, feature flags, helpers

Benefits:

• Single source of truth for brand styles.
• Faster onboarding for new engineers.
• Smaller and more consistent bundles.

Quick practice: export strongly typed component props with TypeScript to make reuse safe and predictable.

Deployments and domains

Modern platforms make deployment painless. Vercel is the most integrated for Next.js, but Netlify, AWS Amplify, or other providers work fine. Steps:

1. Push repo to Git provider.
2. Configure project on Vercel/Netlify, set environment variables.
3. Add custom domains and preview branches.

For multi-domain setups (e.g., www.domain.com for marketing and app.domain.com for the product), configure your hosting platform with separate domain entries and use rewrites/redirects or middleware for path-level routing.

Pro tip: use preview deployments for every PR to validate marketing content and app flows together before merging.

Common pitfalls and how to avoid them

• Route collisions: reserve a clear base URL for the app (e.g., /app).
• Codebase bloat: separate rarely-shared features into subfolders or packages.
• SEO leaks: mark app pages with robots noindex if you don’t want them indexed.
• Secret management: never commit keys; use environment variables per environment.

Best practices checklist:

• Use TypeScript for safety.
• Keep components small and focused.
• Automate tests for both marketing and app routes.
• Use feature flags for gradual rollouts.

Example folder layout

A simple, practical layout (Next.js 13+ with /app):
/app
├─ layout.tsx (root layout)
├─ page.tsx (marketing home)
├─ about/page.tsx
├─ pricing/page.tsx
└─ dashboard
├─ layout.tsx (app layout)
└─ page.tsx (dashboard)

components/
design/
lib/
public/
styles/

Conclusion and next steps

Combining your marketing site and web app in one Next.js codebase is efficient and practical. Start with a clear route plan, centralize shared UI, and protect app routes with middleware and server-side checks. If you'd like guidance or help building this setup, see https://prateeksha.com or read more on the topic at https://prateeksha.com/blog. For a detailed walkthrough of this exact approach, visit https://prateeksha.com/blog/nextjs-marketing-site-web-app-same-codebase.

Ready to launch faster and reduce maintenance overhead? Apply these patterns and iterate—your team will thank you.