Project Structure

Understanding the project structure will help you navigate and customize this template effectively.

Directory Overview


docs.byteland.app/
├── app/                        # Next.js App Router
│   ├── layout.tsx              # Root layout with Nextra configuration
│   ├── page.tsx                # Home page component
│   ├── globals.css             # Global styles (gradients, custom CSS)
│   ├── BytelandLogo.tsx        # Animated ByteLand logo component
│   ├── _meta.ts                # Root navigation configuration
│   ├── mdx-components.tsx      # MDX component mappings
│   └── docs/                   # Documentation pages
│       ├── _meta.ts            # Sidebar navigation configuration
│       ├── page.mdx            # Docs index page (Introduction)
│       ├── getting-started/    # Getting started section
│       │   └── page.mdx
│       ├── project-structure/  # This page
│       │   └── page.mdx
│       ├── customization/      # Customization guide
│       │   └── page.mdx
│       ├── adding-pages/       # How to add pages
│       │   └── page.mdx
│       └── deployment/         # Deployment guide
│           └── page.mdx
├── public/                     # Static assets
│   ├── openland.svg            # Project logo (navbar left)
│   └── byteland.svg            # ByteLand logo (navbar right)
├── next.config.ts              # Next.js + Nextra configuration
├── package.json                # Dependencies and scripts
├── tsconfig.json               # TypeScript configuration
├── postcss.config.mjs          # PostCSS configuration (for Tailwind)
└── README.md                   # Project documentation

Key Files Explained

`app/layout.tsx`

The root layout file that configures:

Nextra Theme - Documentation theme settings
Navbar - Custom logo, navigation links, theme switch
Sidebar - Auto-generated from _meta.ts files
Metadata - Site title and description

`app/_meta.ts`

Defines top-level navigation. Example:


export default {
  docs: {
    type: "page",
    title: "Documentation",
  },
};

`app/docs/_meta.ts`

Defines sidebar navigation for the docs section:


export default {
  "getting-started": "Getting Started",
  "project-structure": "Project Structure",
  // ... more pages
};

`app/globals.css`

Contains custom CSS including:

Tailwind CSS import
ByteLand tri-color gradient utilities
Custom animation classes

`next.config.ts`

Configures Next.js with the Nextra plugin:


import nextra from "nextra";
 
const withNextra = nextra({
  defaultShowCopyCode: true,
});
 
export default withNextra({
  reactStrictMode: true,
});

Adding New Sections

To add a new documentation section:

Create a folder in app/docs/
Add a page.mdx file inside
Update app/docs/_meta.ts with the new entry

See Adding Pages for detailed instructions.