diff --git a/flavors/swagger-ui-react/README.md b/flavors/swagger-ui-react/README.md index 8aaad5e36f9..42677f075be 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