[Page Title]

[Brief 1-2 sentence introduction explaining what this page covers and who it's for]

---

Getting started

[Brief overview section - what the reader needs before starting]

Prerequisites

• [Required knowledge, tools, or setup]
• [Link to relevant documentation if needed]

1. Step one description:

   # Command with explanation
   pnpm install package-name

2. Step two description:

   path/to/file.ts

   // Code example with proper syntax highlighting
   import { ExampleType } from '@/types';
   
   export const exampleFunction = (): ExampleType => {
     // Implementation
     return result;
   };

---

Core concepts

[Explain the fundamental concepts readers need to understand]

Key terminology

• Term 1: Definition and context
• Term 2: Definition and context
• Acronym: Full Name (ACRONYM) - spell out on first use

---

Implementation

Basic setup

[Step-by-step implementation guide]

1. Create the base structure:

   types/example.ts

   import { z } from 'zod';
   
   // Define schema with Zod for validation
   export const ExampleSchema = z.object({
     id: z.string(),
     name: z.string().min(1),
     email: z.string().email(),
   });
   
   export type Example = z.infer<typeof ExampleSchema>;

2. Implement the main functionality:

   lib/example-service.ts

   import { Example, ExampleSchema } from '@/types/example';
   
   /**
    * Creates a new example resource
    * @param data - Example data to create
    * @returns Promise resolving to created example
    * @throws {ValidationError} When data is invalid
    */
   export async function createExample(data: unknown): Promise<Example> {
     try {
       const validatedData = ExampleSchema.parse(data);
       // Implementation logic here
       return validatedData;
     } catch (error) {
       throw new Error(`Validation failed: ${error.message}`);
     }
   }

Advanced configuration

[More complex setup or configuration options]

Configuration options

Option	Type	Default	Description
apiUrl	string	/api/v1	Base API URL
timeout	number	5000	Request timeout in ms
retries	number	3	Number of retry attempts

Environment variables

Create a .env.local file with these variables:

.env.local

# Example service configuration
EXAMPLE_API_KEY=your_api_key_here
EXAMPLE_API_URL=https://api.example.com/v1

---

Step-by-step processes

Using steps with images

For tutorials or guides with multiple steps that require screenshots or images:

Step 1: Initial setup

Start by opening the application and navigating to the main dashboard.

Figure 1: Main dashboard with navigation highlighted

Step 2: Configure settings

Click on the Settings gear icon in the top-right corner to open the configuration panel.

Figure 2: Settings panel (resized for better readability)

Step 3: Apply changes

Review your settings and click "Save Changes" to apply the configuration.

Figure 3: Save confirmation dialog

Alternative: Using admonitions for steps

Step 1: Create the project

Initialize your new project with the following command:

pnpm create next-app@latest my-project

Step 2: Install dependencies

Navigate to your project and install the required packages:

cd my-project && pnpm install

Step 3: Start development

Launch the development server:

pnpm dev

Using tabs for different approaches

Using GUI

Step 1: Open the interface

Navigate to the visual interface and click "New Project".

Step 2: Configure options

Fill in the project details in the form.

Using CLI

Step 1: Run the command

Execute the project creation command:

npx create-project my-app

Step 2: Answer prompts

Respond to the interactive prompts:

? Project name: my-app
? Use TypeScript: Yes
? Install dependencies: Yes

---

Examples

Basic example

[Complete, runnable example showing common use case]

components/ExampleComponent.tsx

import React, { useState, useEffect } from 'react';
import { Example } from '@/types/example';
import { createExample } from '@/lib/example-service';

interface ExampleComponentProps {
  initialData?: Example;
  onSuccess?: (example: Example) => void;
}

export const ExampleComponent: React.FC<ExampleComponentProps> = ({
  initialData,
  onSuccess,
}) => {
  const [example, setExample] = useState<Example | null>(initialData || null);
  const [loading, setLoading] = useState(false);
  
  const handleSubmit = async (data: unknown) => {
    try {
      setLoading(true);
      const result = await createExample(data);
      setExample(result);
      onSuccess?.(result);
    } catch (error) {
      console.error('Failed to create example:', error);
    } finally {
      setLoading(false);
    }
  };
  
  return (
    <div className="p-4 border rounded-lg">
      {loading ? (
        <div>Loading...</div>
      ) : (
        <div>
          {/* Component implementation */}
          <h3 className="text-lg font-semibold">{example?.name}</h3>
          <p className="text-gray-600">{example?.email}</p>
        </div>
      )}
    </div>
  );
};

Advanced example

[More complex example showing advanced features]

hooks/useExample.ts

import { useState, useEffect, useCallback } from 'react';
import { Example } from '@/types/example';
import { createExample } from '@/lib/example-service';

export function useExample(initialId?: string) {
  const [example, setExample] = useState<Example | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  
  const fetchExample = useCallback(async (id: string) => {
    try {
      setLoading(true);
      setError(null);
      // Fetch logic here
      const result = await createExample({ id });
      setExample(result);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error');
    } finally {
      setLoading(false);
    }
  }, []);
  
  useEffect(() => {
    if (initialId) {
      fetchExample(initialId);
    }
  }, [initialId, fetchExample]);
  
  return {
    example,
    loading,
    error,
    refetch: fetchExample,
  };
}

---

Troubleshooting

Common issues

Issue: [Describe common problem]

Symptoms:

• [List observable symptoms]
• [Error messages or behaviors]

Solution:

1. Check that [specific condition]
2. Verify [configuration or setup]
3. Try [specific fix]:

   pnpm run command-to-fix

Issue: [Another common problem]

Symptoms:

• [Observable symptoms]

Solution: [Step-by-step resolution]

Error messages

Error	Cause	Solution
ValidationError: Invalid data	Data doesn't match schema	Check data format against schema definition
Network timeout	API request exceeded timeout	Increase timeout or check network connection

Debug mode

Enable debug logging for additional information:

lib/debug.ts

// Enable debug mode
process.env.DEBUG = 'example:*';

// Use debug logging
import debug from 'debug';
const log = debug('example:service');

log('Processing request with data:', data);