How Next.js and Nextra Power the Prompt Engineering Guide Documentation Site

The Prompt Engineering Guide leverages Next.js as its React framework foundation for routing, internationalization, and build optimization, while Nextra provides the specialized documentation theme, full-text search, and markdown rendering that generates the static site at promptingguide.ai.

The dair-ai/Prompt-Engineering-Guide repository hosts a comprehensive multilingual resource for prompt engineering techniques. As noted in CLAUDE.md, the project is explicitly built with Next.js using the Nextra theme. This architecture employs Next.js for core web infrastructure while Nextra provides the documentation framework, allowing contributors to write content in markdown while the build process automatically produces optimized, searchable HTML pages.

The Role of Next.js in the Prompt Engineering Guide

Next.js serves as the core React framework that powers the underlying web application infrastructure. According to the source code in next.config.js, the project uses Next.js to handle client-side routing, internationalization (i18n), webpack customization, and static site generation.

The configuration file reveals that the site supports multiple locales, with Next.js managing the routing structure for English, Chinese, Japanese, and other language variants. Next.js also provides the webpack configuration pipeline, which the project extends to handle custom SVG processing and other asset optimizations.

How Nextra Extends Next.js for Documentation

While Next.js provides the foundation, Nextra is a documentation-specific theme layer built on top of Next.js. The Prompt Engineering Guide uses Nextra to transform markdown content into a polished documentation site without requiring custom React components for every page.

Nextra supplies the project with several documentation-specific features:

• Automatic table of contents generation from markdown headings
• Full-text search functionality indexing all documentation content
• Markdown rendering with syntax highlighting and LaTeX math support
• Themable layout components including navigation bars, sidebars, and footers

The integration occurs in next.config.js through the withNextra wrapper function, which injects the documentation theme into the Next.js build process.

Configuration Deep Dive

Integrating Nextra with Next.js

The connection between Next.js and Nextra is established in the next.config.js file located at the repository root. This configuration uses the withNextra higher-order function to wrap the standard Next.js configuration:

// next.config.js
const withNextra = require('nextra')({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.tsx',
  latex: true
});

module.exports = withNextra({
  i18n: {
    locales: ['en', 'zh', 'jp', 'pt', 'tr', 'es', 'it', 'fr', 'kr', 'uk', 'ar', 'fa', 'ru', 'de'],
    defaultLocale: 'en'
  },
  webpack(config) {
    // Custom SVG handling
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack']
    });
    return config;
  }
});

This configuration demonstrates how Next.js handles the internationalization setup with 14 supported locales while Nextra manages the documentation theme and LaTeX rendering capabilities.

Customizing the Documentation Theme

The visual and functional aspects of the documentation site are controlled through theme.config.tsx, which exports a configuration object conforming to the DocsThemeConfig type from nextra-theme-docs:

// theme.config.tsx
import { DocsThemeConfig } from 'nextra-theme-docs';

const config: DocsThemeConfig = {
  logo: (
    <span>
      <span className="font-bold">Prompt</span> Engineering Guide
    </span>
  ),
  project: {
    link: 'https://github.com/dair-ai/Prompt-Engineering-Guide'
  },
  chat: {
    link: 'https://discord.gg/FUyz9vPu',
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24">
        <path fill="currentColor" d="M..."/>
      </svg>
    )
  },
  docsRepositoryBase: 'https://github.com/dair-ai/Prompt-Engineering-Guide/tree/main/pages',
  footer: {
    text: (
      <span>
        MIT {new Date().getFullYear()} ©{' '}
        <a href="https://dair.ai" target="_blank">
          DAIR.AI
        </a>
      </span>
    )
  },
  i18n: [
    { locale: 'en', text: 'English' },
    { locale: 'zh', text: '中文' },
    { locale: 'jp', text: '日本語' },
    // ... additional locales
  ]
};

export default config;

This configuration file demonstrates how Nextra abstracts away complex React component implementation, allowing maintainers to define the site structure through a simple configuration object while Next.js handles the underlying rendering and routing.

Summary

• Next.js provides the foundation: The Prompt Engineering Guide uses Next.js in next.config.js to manage routing, internationalization across 14 languages, webpack customization, and static site generation.

• Nextra adds documentation features: Built on top of Next.js, Nextra supplies the documentation-specific UI components, full-text search, automatic table of contents, and markdown rendering configured through theme.config.tsx.

• Combined architecture: The withNextra wrapper in next.config.js integrates the two technologies, enabling a multilingual, maintainable documentation site at promptingguide.ai without requiring a separate content management system.

Frequently Asked Questions

What is the relationship between Next.js and Nextra in this project?

Next.js serves as the underlying React framework that handles routing, builds, and internationalization, while Nextra operates as a documentation-specific theme layer built on top of Next.js. In the Prompt Engineering Guide repository, Next.js configuration in next.config.js wraps the Nextra theme using the withNextra function, allowing the project to leverage Next.js performance features while gaining Nextra's documentation UI components.

How does the Prompt Engineering Guide handle multilingual support?

The project uses Next.js's built-in internationalization capabilities configured in next.config.js to support 14 different locales including English, Chinese, Japanese, Portuguese, and others. Nextra complements this by providing a language selector UI component configured in theme.config.tsx through the i18n array, which defines the display text for each locale. This combination allows the static site to generate localized versions of all documentation pages automatically.

Can I customize the appearance of a Nextra-based site like this one?

Yes, customization is achieved primarily through the theme.config.tsx file, which exports a DocsThemeConfig object that controls the logo, navigation bar, footer, project links, and chat icons. For deeper styling modifications, you can override CSS variables or create custom React components. The Prompt Engineering Guide demonstrates this flexibility by embedding a custom services link in the navbar and configuring a multi-language footer while maintaining the core Nextra documentation layout.

Why use Nextra instead of building a custom Next.js documentation site?

Nextra eliminates the need to build common documentation features from scratch by providing pre-built components for search, table of contents generation, markdown rendering with syntax highlighting, and responsive navigation. According to the source configuration in next.config.js, the Prompt Engineering Guide activates LaTeX math rendering and custom SVG handling through simple configuration options rather than complex webpack modifications. This allows maintainers to focus on content creation in markdown while Nextra handles the documentation UI patterns automatically.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}