diff --git a/README.md b/README.md
index 40f890b938..0a00d442ce 100644
--- a/README.md
+++ b/README.md
@@ -154,10 +154,11 @@ train_evaluation.r2_score_linear_regression:
### Standalone React component usage
-To use Kedro-Viz as a standalone React component, import the component and supply a data JSON as prop:
+To use Kedro-Viz as a standalone React component, you can follow the example below. However, please note that Kedro-Viz does not support server-side rendering (SSR). If you're using Next.js or another SSR framework, you should be aware of this limitation.
```javascript
import KedroViz from '@quantumblack/kedro-viz';
+import '@quantumblack/kedro-viz/lib/styles.min.css';
const MyApp = () => (
@@ -166,6 +167,23 @@ const MyApp = () => (
);
```
+To use with NextJS:
+
+```javascript
+import '@quantumblack/kedro-viz/lib/styles.min.css';
+import dynamic from 'next/dynamic';
+
+const NoSSRKedro = dynamic(() => import('@quantumblack/kedro-viz'), {
+ ssr: false,
+});
+
+const MyApp = () => (
+
+
+
+);
+```
+
The JSON can be obtained by running:
```bash
diff --git a/RELEASE.md b/RELEASE.md
index 7aad591a83..286ef26ea5 100644
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -10,7 +10,7 @@ Please follow the established format:
## Bug fixes and other changes
-- Resolved various bugs affecting server-side rendering, updated dependencies to ensure compatibility with Vite and Next.js environments (#1508)
+- Updated dependencies to ensure compatibility with Vite and Next.js environments, combine css into a signle file for npm library (#1510)
# Release 6.5.0
@@ -25,7 +25,6 @@ Please follow the established format:
- Remove python upper-bound requirements and add KedroVizPythonVersion warning. (#1506)
- Resolved various bugs affecting server-side rendering, updated dependencies to ensure compatibility with Vite and Next.js environments (#1508)
-
# Release 6.4.0
## Major features and improvements
diff --git a/package.json b/package.json
index 216a716111..c6783f6313 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@quantumblack/kedro-viz",
- "version": "6.5.1",
+ "version": "6.5.0",
"description": "Kedro-Viz is an interactive development tool for building data science pipelines with Kedro.",
"main": "lib/components/app/index.js",
"files": [
@@ -21,7 +21,7 @@
"lib": "npm-run-all -s lib:clean lib:copy lib:css lib:webpack lib:babel lib:prune",
"lib:clean": "rm -rf lib",
"lib:copy": "cp -rf src lib",
- "lib:css": "sass --no-source-map lib/. && cleancss -o lib/styles/styles.min.css lib/**/*.css",
+ "lib:css": "sass --no-source-map lib/. && cleancss -o lib/styles.min.css lib/**/*.css",
"lib:webpack": "webpack --config webpack.lib.js",
"lib:babel": "babel lib --out-dir lib",
"lib:prune": "find lib -type f -name '*.test.*' -delete && find lib -type f -name '*.scss' -delete && find lib/components -type f -name '*.css' -delete",