Add nextjs-server framework

.github/workflows/e2e-test.yml

@@ -11,15 +11,21 @@ jobs:
       - uses: pnpm/action-setup@v2
         with:
           version: 8
+      - name: Install scripts
+        run: pnpm install && pnpm exec playwright install
+        working-directory: scripts
       - name: Install create-nextjs-storybook
         run: pnpm install
         working-directory: packages/create-nextjs-storybook
       - name: Build create-nextjs-storybook
         run: pnpm build
         working-directory: packages/create-nextjs-storybook
-      - name: Install scripts
-        run: pnpm install && pnpm exec playwright install
-        working-directory: scripts
+      - name: Install nextjs-server
+        run: pnpm install
+        working-directory: packages/nextjs-server
+      - name: Build nextjs-server
+        run: pnpm prep
+        working-directory: packages/nextjs-server
       - name: Run E2E Tests (pages dir)
         uses: BerniWittmann/background-server-action@v1
         with:

packages/create-nextjs-storybook/src/index.ts

@@ -21,6 +21,8 @@ const logger = console;
 const DIRNAME = new URL('.', import.meta.url).pathname;
 const VERSION = '0.0.0-pr-24447-sha-c98bddd2';
 
+const ensureDirShallow = async (path: string) => mkdir(path).catch(() => {});
+
 const getEmptyDirMessage = (packageManagerType: PackageManagerName) => {
   const generatorCommandsMap = {
     npm: 'npm create',
@@ -64,7 +66,7 @@ const createConfig = async ({ appDir, language, srcDir, addons }: CreateOptions)
   const templateDir = join(DIRNAME, '..', 'templates', 'sb');
   const configDir = join(process.cwd(), '.storybook');
 
-  await mkdir(configDir).catch(() => {});
+  await ensureDirShallow(configDir);
 
   if (!appDir) {
     const previewFile = language == SupportedLanguage.JAVASCRIPT ? 'preview.jsx' : 'preview.tsx';
@@ -96,6 +98,23 @@ const createStories = async ({ srcDir, appDir, language }: CreateOptions) => {
   );
 };
 
+/**
+ * NextJS app router has problems if the routes are created dynamically on
+ * first startup, so let's try to create them on install.
+ */
+const createRoutes = async ({ srcDir, appDir, language }: CreateOptions) => {
+  if (!appDir) return;
+  const templateDir = join(DIRNAME, '..', 'templates', 'app', 'groupLayouts');
+
+  const groupDir = join(srcDir, 'app', '(sb)');
+  await ensureDirShallow(groupDir);
+  await cp(join(templateDir, 'layout-root.tsx'), join(groupDir, 'layout.tsx'));
+
+  const previewDir = join(groupDir, 'storybook-preview');
+  await ensureDirShallow(previewDir);
+  await cp(join(templateDir, 'layout-nested.tsx'), join(previewDir, 'layout.tsx'));
+};
+
 const updateNextConfig = async () => {
   const nextConfigPath = join(process.cwd(), 'next.config.js');
 
@@ -163,6 +182,7 @@ const init = async () => {
   await createConfig(options);
   status('Creating example stories', 1000);
   await createStories(options);
+  await createRoutes(options);
   await updateNextConfig();
   status('Installing package dependencies', 1500);
   await packageManager.addDependencies(

packages/create-nextjs-storybook/templates/app/groupLayouts

@@ -0,0 +1 @@
+../../../nextjs-server/template/app/groupLayouts

packages/nextjs-server/README.md

@@ -0,0 +1,3 @@
+# Storybook NextJS Server
+
+https://chromatic-ui.notion.site/Storybook-NextJS-Server-df380c489bae4a5e9d6f326d703e4c4c?pvs=4

packages/nextjs-server/package.json

@@ -0,0 +1,139 @@
+{
+  "name": "@storybook/nextjs-server",
+  "private": true,
+  "version": "8.0.0-alpha.0",
+  "description": "Storybook for NextJS Server: Embedded server-side rendering",
+  "keywords": [
+    "storybook",
+    "nextjs"
+  ],
+  "homepage": "https://github.com/storybookjs/nextjs-server/tree/next/packages/nextjs-server",
+  "bugs": {
+    "url": "https://github.com/storybookjs/nextjs-server/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/nextjs-server.git",
+    "directory": "code/frameworks/nextjs-server"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./dist/index.js",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./preset": {
+      "types": "./dist/preset.d.ts",
+      "require": "./dist/preset.js"
+    },
+    "./plugin": {
+      "types": "./dist/plugin.d.ts",
+      "require": "./dist/plugin.js"
+    },
+    "./mock": {
+      "types": "./dist/mock.d.ts",
+      "node": "./dist/mock.js",
+      "require": "./dist/mock.js",
+      "import": "./dist/mock.mjs"
+    },
+    "./next-config": {
+      "node": "./dist/next-config.js"
+    },
+    "./pages": {
+      "types": "./dist/pages/index.d.ts",
+      "import": "./dist/pages/index.mjs"
+    },
+    "./channels": {
+      "types": "./dist/reexports/channels.d.ts",
+      "node": "./dist/reexports/channels.js",
+      "require": "./dist/reexports/channels.js",
+      "import": "./dist/reexports/channels.mjs"
+    },
+    "./core-events": {
+      "types": "./dist/reexports/core-events.d.ts",
+      "node": "./dist/reexports/core-events.js",
+      "require": "./dist/reexports/core-events.js",
+      "import": "./dist/reexports/core-events.mjs"
+    },
+    "./preview-api": {
+      "types": "./dist/reexports/preview-api.d.ts",
+      "node": "./dist/reexports/preview-api.js",
+      "require": "./dist/reexports/preview-api.js",
+      "import": "./dist/reexports/preview-api.mjs"
+    },
+    "./types": {
+      "types": "./dist/reexports/types.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "template/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "node --loader ../../scripts/node_modules/esbuild-register/loader.js -r ../../scripts/node_modules/esbuild-register/register.js ../../scripts/prepare/check.ts",
+    "prep": "node --loader ../../scripts/node_modules/esbuild-register/loader.js -r ../../scripts/node_modules/esbuild-register/register.js ../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@babel/core": "^7.22.9",
+    "@babel/types": "^7.22.5",
+    "@storybook/channels": "0.0.0-pr-25086-sha-fa16f873",
+    "@storybook/core-common": "0.0.0-pr-25086-sha-fa16f873",
+    "@storybook/core-events": "0.0.0-pr-25086-sha-fa16f873",
+    "@storybook/core-server": "0.0.0-pr-25086-sha-fa16f873",
+    "@storybook/csf-tools": "0.0.0-pr-25086-sha-fa16f873",
+    "@storybook/node-logger": "0.0.0-pr-25086-sha-fa16f873",
+    "@storybook/preview-api": "0.0.0-pr-25086-sha-fa16f873",
+    "@storybook/react": "0.0.0-pr-25086-sha-fa16f873",
+    "@storybook/types": "0.0.0-pr-25086-sha-fa16f873",
+    "@storybook/csf": "^0.1.2",
+    "@types/node": "^18.0.0",
+    "@types/react": "^18",
+    "fs-extra": "^11.1.0",
+    "ts-dedent": "^2.0.0",
+    "unplugin": "^1.3.1"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.1",
+    "typescript": "^5.3.2"
+  },
+  "peerDependencies": {
+    "next": "^14",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/null-builder.ts",
+      "./src/null-renderer.ts",
+      "./src/preset.ts",
+      "./src/mock.ts",
+      "./src/next-config.cts",
+      "./src/pages/index.ts",
+      "./src/reexports/channels.ts",
+      "./src/reexports/core-events.ts",
+      "./src/reexports/preview-api.ts",
+      "./src/reexports/types.ts"
+    ],
+    "platform": "node"
+  }
+}