Render API references with Redoc and Swagger UI

This example project renders an OpenAPI file with both Redoc and Swagger UI. This is to show how using React to create pages makes it possible to render API reference documentation with a small amount of code.

You can view the references for Redoc and Swagger UI.

Using React components

Both Redoc and Swagger UI provide react components that you can use to render an OpenAPI file in a Next.js app. Once you've placed your OpenAPI file in your public/ directory, you can render it with Redoc with the code below.

import { RedocStandalone } from 'redoc';

export default function RedocPage() {
  return <RedocStandalone specUrl="/petstore.yaml" />;
}

You can view the page that renders Redoc on GitHub.