Create a Hashicorp branded docs page in NextJS projects.

Usage no npm install needed!

<script type="module">
  import hashicorpReactDocsPage from 'https://cdn.skypack.dev/@hashicorp/react-docs-page';



The DocsPage component lets you create a Hashicorp branded docs page in NextJS projects using next-mdx-remote. This is a very highly abstracted component with slightly more involved usage since it renders an entire collection of pages.

Example Usage

This component is intended to be used on an optional catch-all route page, like pages/docs/[[...page]].mdx - example source shown below:

import DocsPage from '@hashicorp/react-docs-page'
// Imports below are only used server-side
import { getStaticGenerationFunctions } from '@hashicorp/react-docs-page/server'

//  Set up DocsPage settings
const BASE_ROUTE = 'docs'
const NAV_DATA = 'data/docs-nav-data.json'
const CONTENT_DIR = 'content/docs'
const PRODUCT = {
  name: 'Packer',
  slug: 'packer',

function DocsLayout(props) {
  return (
    <DocsPage baseRoute={BASE_ROUTE} product={PRODUCT} staticProps={props} />

const { getStaticPaths, getStaticProps } = getStaticGenerationFunctions({
  strategy: 'fs',
  navDataFile: NAV_DATA,
  localContentDir: CONTENT_DIR,
  product: PRODUCT.slug,

export { getStaticPaths, getStaticProps }

export default DocsLayout

This may seem like a complex example, but there is a lot going on here. The component is taking care of an entire base-level route, including an index page and its potentially hundreds of sub-pages, while providing a minimal interface surface area.

In order for the search functionality to work properly, this component requires a .env file with the following keys filled in:



See props.js for more information on props.