From 51385fe14fc4071ba76be1c4c10e341fc721b9e0 Mon Sep 17 00:00:00 2001 From: Martin Eigenmann Date: Wed, 24 May 2023 12:26:41 +0200 Subject: [PATCH] docs(swagger-ui-react): hint on usage with Next.js (#8696) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Vladimír Gorej Refs #7970 Refs #8245 --- flavors/swagger-ui-react/README.md | 43 ++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/flavors/swagger-ui-react/README.md b/flavors/swagger-ui-react/README.md index 8aaad5e3..42677f07 100644 --- a/flavors/swagger-ui-react/README.md +++ b/flavors/swagger-ui-react/README.md @@ -177,6 +177,49 @@ Redirect url given as parameter to the oauth2 provider. Default the url refers t ⚠️ This prop is currently only applied once, on mount. Changes to this prop's value will not be propagated to the underlying Swagger UI instance. A future version of this module will remove this limitation, and the change will not be considered a breaking change. +## Next.js + +When using [Next.js](https://nextjs.org/), following options are available for seamless integration of `swagger-ui-react`: + +#### 1. Make sure to enable transpilation for following dependencies `next.config.js`. + +```js +const nextConfig = { + transpilePackages: [ + 'swagger-ui-react', + 'swagger-client', + 'react-syntax-highlighter', + ], +} +``` +or +```js +const withTM = require('next-transpile-modules')([ + 'swagger-ui-react', + 'swagger-client' + 'react-syntax-highlighter', +]); + +const nextConfig = { + reactStrictMode: true, +} + +module.exports = withTM(nextConfig); +``` + +#### 2. Use dynamic import + +```js +import dynamic from "next/dynamic"; + +const SwaggerUI = dynamic(import('swagger-ui-react'), {ssr: false}) + +const Test = () => +export default Test +``` + +More information about Next.js integration can be found in [#7970](https://github.com/swagger-api/swagger-ui/issues/7970) and (#8245)[https://github.com/swagger-api/swagger-ui/issues/8245]. + ## Limitations