SSR Persistence Script

examples/nextjs/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/nextjs/eslint.config.mjs

@@ -0,0 +1,25 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "out/**",
+      "build/**",
+      "next-env.d.ts",
+    ],
+  },
+];
+
+export default eslintConfig;

examples/nextjs/next.config.ts

@@ -0,0 +1,9 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  ignoreBuildErrors: true,
+  optimizePackageImports: ["react-resizable-panels"],
+};
+
+export default nextConfig;

examples/nextjs/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "react-resizable-panels-nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build --turbopack",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "next": "16.0.0",
+    "react-resizable-panels": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.0",
+    "@eslint/eslintrc": "^3"
+  }
+}

examples/nextjs/src/app/globals.css

@@ -0,0 +1,91 @@
+:root {
+  --color-background-code: #050a15;
+  --color-background-default: #081120;
+  --color-brand: #dcadff;
+  --color-button-background: #2a3343;
+  --color-button-background-hover: #39414d;
+  --color-button-border: #18181a;
+  --color-code: #dcadff;
+  --color-default: #ffffff;
+  --color-dim: #91a0ba;
+  --color-horizontal-rule: #39414d;
+  --color-input: #ffffff;
+  --color-input-background: #18181a;
+  --color-input-border: #39414d;
+  --color-input-border-focused: #dcadff;
+  --color-link: #dcadff;
+  --color-panel-background: #192230;
+  --color-panel-background-alternate: #202124;
+  --color-resize-bar: #515b6a;
+  --color-resize-bar-active: #b1bdd0;
+  --color-resize-bar-hover: #515b6a;
+  --color-warning-background: #7400cc;
+
+  --color-scroll-thumb: #515b6a;
+}
+
+:root,
+html,
+body {
+  padding: 0;
+  margin: 0;
+  max-width: 100vw;
+  overflow-x: hidden;
+
+  background-color: var(--color-background-default);
+  color: var(--color-default);
+
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 12px;
+}
+
+* {
+  box-sizing: border-box;
+  line-height: 1.5em;
+}
+
+p {
+  margin: 0.5rem 0;
+}
+
+code {
+  color: var(--color-code);
+  background-color: var(--color-background-code);
+  font-family: monospace;
+  padding: 0 0.25em;
+  border-radius: 0.25em;
+}
+
+h1,
+h2 {
+  font-weight: normal;
+  margin: 0.5rem 0;
+}
+
+a {
+  color: var(--color-link);
+}
+
+::-webkit-scrollbar {
+  width: 0.75rem;
+  height: 0.75rem;
+  background: transparent;
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 0.75rem;
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 0.75rem;
+  background: var(--color-scroll-thumb);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-resize-bar-hover);
+}

examples/nextjs/src/app/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "React Resizable Panels - Next.js Example",
+  description:
+    "Nested resizable panels example using react-resizable-panels in Next.js",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        {children}
+      </body>
+    </html>
+  );
+}