### Run Development Server (Bash)

Source: https://github.com/xaedankye/pokemon-za/blob/main/README.md

Commands to start the Next.js development server using various package managers like npm, yarn, pnpm, and bun. Assumes project dependencies are installed.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Starting Development Server (Shell)

Source: https://context7.com/xaedankye/pokemon-za/llms.txt

Commands to start the Next.js development server. This enables hot module replacement and automatic recompilation for a faster development experience. Works with various package managers like npm, pnpm, yarn, and bun.

```bash
# Using npm
npm run dev

# Using pnpm
pnpm dev

# Using yarn
yarn dev

# Using bun
bun dev

# Server will start at http://localhost:3000

```

--------------------------------

### Starting Production Server (Shell)

Source: https://context7.com/xaedankye/pokemon-za/llms.txt

Command to start the production server after the application has been built. This serves the optimized build files and typically runs on http://localhost:3000 by default.

```bash
# Start production server
npm run start

# Server will serve the optimized build
# Runs on http://localhost:3000 by default

```

--------------------------------

### Example Page File (TypeScript)

Source: https://github.com/xaedankye/pokemon-za/blob/main/README.md

Illustrates the typical structure of a page file in a Next.js application, specifically mentioning the 'app/page.tsx' file for editing. This file handles the main content rendering.

```typescript
app/page.tsx
```

--------------------------------

### NPM Package Configuration (JSON)

Source: https://context7.com/xaedankye/pokemon-za/llms.txt

Defines project metadata, dependencies, and scripts for the NPM package. This file is essential for managing project dependencies and defining executable scripts like 'dev', 'build', 'start', and 'lint'. It specifies both production and development dependencies.

```json
{
  "name": "pokemon-za",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  },
  "dependencies": {
    "react": "19.2.0",
    "react-dom": "19.2.0",
    "next": "16.0.0"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4",
    "eslint": "^9",
    "eslint-config-next": "16.0.0"
  }
}

```

--------------------------------

### Building for Production (Shell)

Source: https://context7.com/xaedankye/pokemon-za/llms.txt

Command to create an optimized production build of the Next.js application. This process generates pre-rendered pages and optimized JavaScript bundles for deployment. The output is typically placed in the .next directory.

```bash
# Build the application
npm run build

# Output will be generated in .next directory
# Optimized JavaScript bundles
# Pre-rendered pages
# Server-side rendering manifests

```

--------------------------------

### Home Page Component (React/Next.js)

Source: https://context7.com/xaedankye/pokemon-za/llms.txt

The main landing page component for the application, built with Next.js. It displays welcome content, Next.js branding, and includes call-to-action links for deployment and documentation. This component utilizes Next.js Image optimization and dynamic styling.

```tsx
import Image from "next/image";

export default function Home() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
        {/* Optimized Next.js logo */}
        <Image
          className="dark:invert"
          src="/next.svg"
          alt="Next.js logo"
          width={100}
          height={20}
          priority
        />

        {/* Main content section */}
        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
            To get started, edit the page.tsx file.
          </h1>
          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
            Looking for a starting point or more instructions? Head over to{" "}
            <a
              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
              className="font-medium text-zinc-950 dark:text-zinc-50"
            >
              Templates
            </a>{" "} or the{" "}
            <a
              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
              className="font-medium text-zinc-950 dark:text-zinc-50"
            >
              Learning
            </a>{" "}
            center.
          </p>
        </div>

        {/* Action buttons */}
        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
          <a
            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
          >
            <Image
              className="dark:invert"
              src="/vercel.svg"
              alt="Vercel logomark"
              width={16}
              height={16}
            />
            Deploy Now
          </a>
          <a
            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
          >
            Documentation
          </a>
        </div>
      </main>
    </div>
  );
}
```

--------------------------------

### Next.js Configuration (TypeScript)

Source: https://context7.com/xaedankye/pokemon-za/llms.txt

Defines Next.js build and runtime configurations. This file allows customization of various Next.js features such as image optimization, routing, and server settings. No external dependencies are required beyond Next.js itself.

```typescript
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;

```

--------------------------------

### Linting Code with ESLint (Shell)

Source: https://context7.com/xaedankye/pokemon-za/llms.txt

Command to run ESLint for code quality checks and enforcing best practices. ESLint will analyze TypeScript files, validate code style, and report any identified issues, ensuring adherence to project standards.

```bash
# Run ESLint checks
npm run lint

# ESLint will:
# - Check TypeScript files for errors
# - Enforce Next.js Web Vitals rules
# - Validate code style and patterns
# - Report any issues found

```

--------------------------------

### TypeScript Configuration (JSON/Next.js)

Source: https://context7.com/xaedankye/pokemon-za/llms.txt

TypeScript compiler options optimized for Next.js development. This configuration enables strict type checking, module resolution, and integrates with the Next.js build process. It includes path aliases for module imports and excludes node_modules.

```json
{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    ".next/dev/types/**/*.ts",
    "**/*.mts"
  ],
  "exclude": ["node_modules"]
}
```

--------------------------------

### Root Layout Component in Next.js

Source: https://context7.com/xaedankye/pokemon-za/llms.txt

The root layout component (`RootLayout`) in Next.js 16 sets up the global structure for the application. It configures metadata, imports Geist fonts for optimized typography, and applies global styles. This component serves as the main wrapper for all pages, enabling features like dark mode and responsive design.

```tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

// Configure primary sans-serif font
const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

// Configure monospace font
const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

// Define application metadata
export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

// Root layout component
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}
```

--------------------------------

### Global CSS Theme Configuration (CSS/Tailwind)

Source: https://context7.com/xaedankye/pokemon-za/llms.txt

Defines global CSS variables for theming and dark mode support using Tailwind CSS. It includes light and dark theme variable definitions and base body styles, ensuring a consistent look and feel across the application.

```css
@import "tailwindcss";

/* Light theme variables */
:root {
  --background: #ffffff;
  --foreground: #171717;
}

/* Tailwind theme configuration */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

/* Dark theme variables */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

/* Base body styles */
body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.