# What Technology Powers the Prompt Engineering Guide? Next.js, Nextra, and React Explained

> Discover the technologies behind the Prompt Engineering Guide. Learn how Next.js, Nextra, and React create this advanced documentation site, optimized for content and internationalization.

- Repository: [DAIR.AI/Prompt-Engineering-Guide](https://github.com/dair-ai/Prompt-Engineering-Guide)
- Tags: deep-dive
- Published: 2026-03-03

---

**The Prompt Engineering Guide is a static documentation site built with Next.js, Nextra, and React TypeScript components, using MDX for content and supporting internationalization through a custom webpack and i18n configuration.**

The Prompt Engineering Guide by dair-ai serves as a comprehensive resource for learning prompt engineering techniques. Understanding what technology powers the Prompt Engineering Guide helps contributors and developers who want to customize the site or deploy similar documentation platforms. The repository combines modern React-based static site generation with MDX-powered content management.

## Core Technology Stack: Next.js and Nextra

The foundation of the Prompt Engineering Guide relies on two primary technologies that handle rendering and documentation structure.

**Next.js** provides the underlying framework for routing, server-side rendering, and static generation. According to the source code in [`next.config.js`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/next.config.js), the project uses Next.js to manage the build pipeline and internationalization settings.

**Nextra** operates as the documentation engine built on top of Next.js. The [`package.json`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/package.json) file declares dependencies on both `nextra` and `nextra-theme-docs`, which parse MDX files and apply the documentation theme. This combination allows the project to transform Markdown/MDX content under the `pages/` directory into fully rendered documentation pages.

## Key Configuration Files and Their Roles

Several critical configuration files define how the Prompt Engineering Guide processes content and renders the user interface.

### package.json: Dependency Management

The [`package.json`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/package.json) file located at the repository root declares the core technology stack. It specifies Next.js as the primary framework alongside React and React-DOM. The file also lists `nextra` and `nextra-theme-docs` as essential dependencies for the documentation functionality.

### next.config.js: Build Pipeline and Internationalization

The [`next.config.js`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/next.config.js) file contains the Next.js configuration that powers the static site generation. According to the source analysis, this file configures:

- **Internationalization (i18n)**: Defines supported locales and default language settings
- **Webpack customization**: Adds custom rules for handling SVG files using `@svgr/webpack`
- **Nextra integration**: Wraps the configuration with Nextra's plugin to enable MDX processing

### theme.config.tsx: Customizing the Nextra Theme

The [`theme.config.tsx`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/theme.config.tsx) file controls the visual and functional aspects of the documentation theme. This TypeScript React component configures:

- **Logo customization**: Defines the SVG logo and site title displayed in the navigation
- **Internationalization menu**: Specifies the language selector with entries for English, Chinese, and other supported locales
- **UI components**: Provides custom React components for interactive elements like copy-page dropdowns

## Content Architecture: MDX Pages and React Components

The Prompt Engineering Guide uses a modern content architecture that separates presentation from content.

### MDX Content Pages

All documentation content resides in the `pages/` directory as MDX files. These files combine Markdown syntax with React component imports, allowing interactive elements within documentation. For example, `pages/tools.en.mdx` contains the English version of the tools guide.

The Nextra engine automatically routes these files based on their filesystem location, creating the site structure without requiring manual route definitions.

### React Components for Interactive Elements

The `components/` directory contains reusable React components written in TypeScript. These components handle specialized UI needs such as:

- **Word wrap functionality**: Custom text display components
- **Interactive selectors**: Language switchers and navigation elements
- **Custom layouts**: Specialized page templates for different content types

## Advanced Features: SVG Handling and i18n

The Prompt Engineering Guide implements sophisticated build-time features to enhance performance and user experience.

### Custom Webpack Configuration for SVGs

The [`next.config.js`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/next.config.js) file includes a custom webpack configuration that optimizes SVG handling. According to the source code, the configuration:

1. Identifies SVG files located in `components/icons/`
2. Excludes these from the default file loader
3. Processes them using `@svgr/webpack` to convert SVGs into React components

This approach allows SVG icons to be imported as React components and manipulated with props, rather than served as static assets.

### Internationalization Architecture

The site supports multiple languages through a comprehensive i18n setup:

- **Configuration**: [`next.config.js`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/next.config.js) defines supported locales and default language
- **Content organization**: MDX files use locale suffixes (e.g., `.en.mdx`, `.zh.mdx`) to store translated content
- **UI localization**: [`theme.config.tsx`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/theme.config.tsx) provides the language selector interface
- **Routing**: Next.js handles automatic locale detection and routing

## Summary

- The Prompt Engineering Guide is built with **Next.js**, **Nextra**, and **React TypeScript**, creating a modern static documentation site.
- **MDX files** in the `pages/` directory provide the content, allowing Markdown mixed with React components.
- **Key configuration files** include [`next.config.js`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/next.config.js) for build settings, [`theme.config.tsx`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/theme.config.tsx) for UI customization, and [`package.json`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/package.json) for dependency management.
- **Advanced features** include custom webpack SVG handling via `@svgr/webpack` and comprehensive internationalization supporting multiple languages.
- The architecture enables fast, SEO-friendly static generation suitable for hosting on Vercel or similar platforms.

## Frequently Asked Questions

### Is the Prompt Engineering Guide built with Docusaurus?

No, the Prompt Engineering Guide uses **Next.js with Nextra** rather than Docusaurus. While both generate static documentation sites, Nextra provides tighter integration with React and Next.js features like file-system based routing and custom webpack configurations. The [`package.json`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/package.json) explicitly lists `nextra` and `nextra-theme-docs` as dependencies, not Docusaurus packages.

### What is Nextra and why was it chosen for the Prompt Engineering Guide?

**Nextra** is a documentation site generator built on top of Next.js that parses MDX files and applies a documentation theme. It was chosen because it combines the performance benefits of Next.js static generation with MDX support, allowing interactive React components within Markdown content. The [`theme.config.tsx`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/theme.config.tsx) file demonstrates how Nextra enables deep customization of the documentation UI while maintaining the core Next.js build pipeline.

### How does the Prompt Engineering Guide handle multiple languages?

The site implements **internationalization (i18n)** through a combination of Next.js locale configuration and file naming conventions. The [`next.config.js`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/next.config.js) defines supported locales, while content files use suffixes like `.en.mdx` or `.zh.mdx` to store translations. The [`theme.config.tsx`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/theme.config.tsx) provides the language selector UI, and Next.js automatically handles locale-based routing and detection when users visit the site.

### Can I contribute MDX content to the Prompt Engineering Guide?

Yes, contributors can add or edit documentation by working with **MDX files** in the `pages/` directory. These files support standard Markdown syntax alongside React component imports, allowing for interactive examples. When contributing, follow the existing file naming pattern including locale suffixes (e.g., `.en.mdx` for English content). The Nextra engine automatically picks up new files and adds them to the site navigation based on their filesystem location.