Project Structure

The Next.js project keeps source files at the repository root. There is no src/ directory.

Root structure

your-nextjs-project/
├── public/                     # Static assets
├── app/                        # App Router routes and root layout
├── components/                 # Shared and page-specific React components
├── context/                    # React context providers
├── data/                       # Static data and Markdown content
├── hooks/                      # Custom hooks
├── interface/                  # Shared TypeScript interfaces
├── styles/                     # Global tokens and style layers
├── utils/                      # Metadata, fonts, Markdown helpers, utilities
├── next.config.ts
├── package.json
├── tsconfig.json
└── README.md

Key directories

app/

This project uses the Next.js App Router. Each route lives in its own folder with a page.tsx file.

Examples:

• app/page.tsx -> homepage
• app/about/page.tsx -> /about
• app/blog/page.tsx -> /blog
• app/blog/[slug]/page.tsx -> dynamic blog detail pages
• app/use-case/[slug]/page.tsx -> dynamic use-case detail pages

The root layout in app/layout.tsx wraps every page with the shared navbar, footer, smooth scroll provider, and mobile menu context.

components/

UI is broken into page-focused folders and shared building blocks.

Examples:

• components/home/ for homepage sections
• components/blog/ and components/blog-details/ for blog views
• components/shared/ for layout, buttons, icons, and reusable UI
• components/animation/ for reveal and smooth-scroll behavior

data/

This folder stores both plain TypeScript data and Markdown content.

Common files include:

• data/pricing.ts
• data/integrations.ts
• data/clone-voices.ts
• data/faq.ts
• data/mobile-menu.ts
• data/blog/*.md
• data/use-cases/*.md

utils/

Project-wide helpers live here.

• utils/generateMetaData.ts centralizes default SEO metadata
• utils/getMarkDownData.ts loads and sorts Markdown collections
• utils/getMarkDownContent.ts loads a single Markdown file by slug
• utils/font.ts registers the Google fonts used across the site

Imports and aliases

The project uses the @/* alias in tsconfig.json, mapped to the project root.

import Navbar from '@/components/shared/layout/navbar/navbar';
import { generateMetadata } from '@/utils/generateMetaData';

Best practices

• keep route files inside app/
• keep page sections in a matching folder inside components/
• store repeatable content in data/ instead of hardcoding it in page files
• keep reusable helpers in utils/ and shared types in interface/