@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.