@docusaurus/plugin-content-pages

What is @docusaurus/plugin-content-pages?

@docusaurus/plugin-content-pages is a plugin for Docusaurus, a popular static site generator. This plugin allows you to create custom pages in your Docusaurus site using React components. It is useful for adding static content that doesn't fit into the documentation or blog categories, such as landing pages, about pages, or custom 404 pages.

What are @docusaurus/plugin-content-pages's main functionalities?

Creating Custom Pages

This feature allows you to create custom pages in your Docusaurus site. You can define a new page by creating a React component in the `src/pages` directory. The example shows how to create a simple custom page with a title and some content.

module.exports = {
  plugins: [
    '@docusaurus/plugin-content-pages',
  ],
};

// src/pages/customPage.js
import React from 'react';
import Layout from '@theme/Layout';

function CustomPage() {
  return (
    <Layout title="Custom Page">
      <div>
        <h1>Custom Page</h1>
        <p>This is a custom page.</p>
      </div>
    </Layout>
  );
}

export default CustomPage;

Custom 404 Page

This feature allows you to create a custom 404 page for your Docusaurus site. By creating a `404.js` file in the `src/pages` directory, you can define the content that will be displayed when a user navigates to a non-existent page.

// src/pages/404.js
import React from 'react';
import Layout from '@theme/Layout';

function NotFound() {
  return (
    <Layout title="Page Not Found">
      <div>
        <h1>404</h1>
        <p>Oops! The page you are looking for does not exist.</p>
      </div>
    </Layout>
  );
}

export default NotFound;

Other packages similar to @docusaurus/plugin-content-pages

gatsby-plugin-page-creator

gatsby-plugin-page-creator is a plugin for Gatsby, another popular static site generator. It automatically creates pages from React components in specified directories. Compared to @docusaurus/plugin-content-pages, it offers similar functionality but is tailored for use with Gatsby.

next.js

Next.js is a React framework that allows you to create static and dynamic pages. It provides a file-based routing system where you can create pages by adding React components to the `pages` directory. While it offers more advanced features like server-side rendering and API routes, it can be used similarly to @docusaurus/plugin-content-pages for creating static content.

README

@docusaurus/plugin-content-pages

Pages plugin for Docusaurus.

Usage

See plugin-content-pages documentation.

Changelog

3.7.0 (2025-01-03)

:rocket: New Feature

• docusaurus-faster, docusaurus
  • #10800 feat(core): Turn Rspack incremental on by default (again) (@slorber)
• docusaurus-plugin-content-blog, docusaurus-theme-classic
  • #10768 feat(blog): Add author social icons for bluesky, mastodon, threads, twitch, youtube, instagram (@GingerGeek)
• create-docusaurus, docusaurus-mdx-loader, docusaurus-module-type-aliases, docusaurus-plugin-client-redirects, docusaurus-plugin-content-blog, docusaurus-plugin-content-docs, docusaurus-plugin-content-pages, docusaurus-plugin-debug, docusaurus-plugin-google-analytics, docusaurus-plugin-google-gtag, docusaurus-plugin-google-tag-manager, docusaurus-plugin-ideal-image, docusaurus-plugin-pwa, docusaurus-plugin-rsdoctor, docusaurus-plugin-sitemap, docusaurus-plugin-svgr, docusaurus-plugin-vercel-analytics, docusaurus-preset-classic, docusaurus-theme-classic, docusaurus-theme-common, docusaurus-theme-live-codeblock, docusaurus-theme-mermaid, docusaurus-theme-search-algolia, docusaurus-types, docusaurus
  • #10763 feat: Add React 19 support to Docusaurus v3 (@slorber)
• docusaurus-plugin-content-blog
  • #10729 feat(blog): Add frontMatter.sidebar_label (@slorber)
• docusaurus-module-type-aliases, docusaurus-plugin-svgr, docusaurus-preset-classic, docusaurus-types, docusaurus-utils, docusaurus
  • #10677 feat(svgr): create new Docusaurus SVGR plugin (@slorber)

:bug: Bug Fix

• docusaurus-remark-plugin-npm2yarn
  • #10803 fix(npm-to-yarn): add missing npm-to-yarn converter for Bun (@Lehoczky)
• docusaurus-theme-classic, docusaurus-theme-common
  • #10796 fix(theme): Footer Column/Link should merge provided className (@slorber)
• docusaurus-bundler, docusaurus-theme-common
  • #10786 fix(core): fix React hydration errors, change html minifier settings (@slorber)
• docusaurus-theme-common
  • #10782 fix(theme-common): code block magic comments should support SQL block comments (@WillBlack403)
• docusaurus-theme-translations
  • #10783 fix(theme-translations): Add missing Dutch (nl) theme translations (@janaukema)
  • #10760 fix(theme-translation): add missing Korean (ko) theme translations (@effozen)
• docusaurus-plugin-content-docs
  • #10754 fix(docs): fix sidebar item visibility bug for category index (@slorber)
• docusaurus
  • #10727 fix(core): fix codegen routesChunkName possible hash collision (@slorber)
• docusaurus-mdx-loader
  • #10723 fix(mdx-loader): fix md image paths with spaces bug related to transformImage encoding problem (@slorber)

:memo: Documentation

• #10740 docs: Link initialization docs together (@waldyrious)

:robot: Dependencies

• #10771 chore(deps): bump nanoid from 3.3.7 to 3.3.8 (@dependabot[bot])
• #10721 chore(deps): bump actions/dependency-review-action from 4.4.0 to 4.5.0 (@dependabot[bot])

:wrench: Maintenance

• Other
  • #10770 chore: Devcontainer upgrade to Ubuntu Noble & Node 22 (@GingerGeek)
• docusaurus-theme-search-algolia
  • #10801 refactor(algolia): simplify SearchBar component (@slorber)
  • #10672 chore(algolia): upgrade algoliasearch to v5 (@millotp)
• docusaurus
  • #10798 refactor(core): Use Intl native API to get locale direction, remove rtl-detect depend… (@slorber)
  • #10747 refactor(core): swizzle wrap should use ReactNode instead of JSX.Element (@slorber)
• create-docusaurus, docusaurus-mdx-loader, docusaurus-module-type-aliases, docusaurus-plugin-content-blog, docusaurus-plugin-content-docs, docusaurus-plugin-content-pages, docusaurus-plugin-debug, docusaurus-plugin-ideal-image, docusaurus-plugin-pwa, docusaurus-theme-classic, docusaurus-theme-common, docusaurus-theme-live-codeblock, docusaurus-theme-mermaid, docusaurus-theme-search-algolia, docusaurus-types, docusaurus
  • #10746 refactor: prepare types for React 19 (@slorber)
• docusaurus-theme-common
  • #10728 refactor(theme-common): change storageUtils useSyncExternalCode getSnapshot workaround (@slorber)

Committers: 14

• Alvin Bryan (@alvinometric)
• Hichem Fantar (@hichemfantar)
• Ivan Cheban (@ivancheban)
• Jake Boone (@jakeboone02)
• Jan Aukema (@janaukema)
• Lehoczky Zoltán (@Lehoczky)
• Lin Huang (@codimiracle)
• Pierre Millot (@millotp)
• Sébastien Lorber (@slorber)
• Taylor Reece (@taylorreece)
• Waldir Pimenta (@waldyrious)
• William Black (@WillBlack403)
• Zed Spencer-Milnes (@GingerGeek)
• Zen (@effozen)