Next.js: Drop Next.js < v13.5 support

.circleci/config.yml

@@ -614,30 +614,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 36
+          parallelism: 35
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 36
+          parallelism: 35
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 33
+          parallelism: 32
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 31
+          parallelism: 30
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 31
+          parallelism: 30
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness

MIGRATION.md

@@ -12,6 +12,7 @@
     - [React-docgen component analysis by default](#react-docgen-component-analysis-by-default)
   - [Framework-specific changes](#framework-specific-changes)
     - [Angular: Drop support for Angular \< 15](#angular-drop-support-for-angular--15)
+    - [Next.js: Drop support for version \< 13.5](#nextjs-drop-support-for-version--135)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
     - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
@@ -468,6 +469,10 @@ For more information see: https://storybook.js.org/docs/react/api/main-config-ty
 
 Starting in 8.0, we drop support for Angular < 15
 
+#### Next.js: Drop support for version \< 13.5
+
+Starting in 8.0, we drop support for Next.js < 13.5.
+
 ## From version 7.5.0 to 7.6.0
 
 #### CommonJS with Vite is deprecated

code/frameworks/nextjs/package.json

@@ -32,16 +32,6 @@
       "require": "./dist/image-context.js",
       "import": "./dist/image-context.mjs"
     },
-    "./dist/routing/app-router-provider": {
-      "types": "./dist/routing/app-router-provider.d.ts",
-      "require": "./dist/routing/app-router-provider.js",
-      "import": "./dist/routing/app-router-provider.mjs"
-    },
-    "./dist/routing/app-router-provider-mock": {
-      "types": "./dist/routing/app-router-provider-mock.d.ts",
-      "require": "./dist/routing/app-router-provider-mock.js",
-      "import": "./dist/routing/app-router-provider-mock.mjs"
-    },
     "./preset": {
       "types": "./dist/preset.d.ts",
       "require": "./dist/preset.js"
@@ -137,16 +127,12 @@
     "webpack": "^5.65.0"
   },
   "peerDependencies": {
-    "@next/font": "^13.0.0|| ^14.0.0",
-    "next": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
+    "next": "^13.5.0 || ^14.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "webpack": "^5.0.0"
   },
   "peerDependenciesMeta": {
-    "@next/font": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     },
@@ -168,11 +154,8 @@
       "./src/preview.tsx",
       "./src/next-image-loader-stub.ts",
       "./src/images/decorator.tsx",
-      "./src/images/next-future-image.tsx",
       "./src/images/next-legacy-image.tsx",
       "./src/images/next-image.tsx",
-      "./src/routing/app-router-provider.tsx",
-      "./src/routing/app-router-provider-mock.tsx",
       "./src/font/webpack/loader/storybook-nextjs-font-loader.ts",
       "./src/swc/next-swc-loader-patch.ts"
     ],

code/frameworks/nextjs/src/config/webpack.ts

@@ -1,9 +1,8 @@
 import type { Configuration as WebpackConfig } from 'webpack';
-import semver from 'semver';
 
 import type { NextConfig } from 'next';
 import { DefinePlugin } from 'webpack';
-import { addScopedAlias, getNextjsVersion, resolveNextConfig } from '../utils';
+import { addScopedAlias, resolveNextConfig } from '../utils';
 
 const tryResolve = (path: string) => {
   try {
@@ -36,8 +35,6 @@ export const configureConfig = async ({
   return nextConfig;
 };
 
-const version = getNextjsVersion();
-
 const setupRuntimeConfig = (baseConfig: WebpackConfig, nextConfig: NextConfig): void => {
   const definePluginConfig: Record<string, any> = {
     // this mimics what nextjs does client side
@@ -50,21 +47,7 @@ const setupRuntimeConfig = (baseConfig: WebpackConfig, nextConfig: NextConfig):
 
   const newNextLinkBehavior = (nextConfig.experimental as any)?.newNextLinkBehavior;
 
-  /**
-   * In Next 13.0.0 - 13.0.5, the `newNextLinkBehavior` option now defaults to truthy (still
-   * `undefined` in the config), and `next/link` was engineered to opt *out*
-   * of it
-   *
-   */
-  if (
-    semver.gte(version, '13.0.0') &&
-    semver.lt(version, '13.0.6') &&
-    newNextLinkBehavior !== false
-  ) {
-    definePluginConfig['process.env.__NEXT_NEW_LINK_BEHAVIOR'] = true;
-  } else {
-    definePluginConfig['process.env.__NEXT_NEW_LINK_BEHAVIOR'] = newNextLinkBehavior;
-  }
+  definePluginConfig['process.env.__NEXT_NEW_LINK_BEHAVIOR'] = newNextLinkBehavior;
 
   baseConfig.plugins?.push(new DefinePlugin(definePluginConfig));
 };

code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts

@@ -5,34 +5,28 @@ import {
   GoogleFontsDownloadError,
   GoogleFontsLoadingError,
 } from '@storybook/core-events/server-errors';
+import { validateGoogleFontFunctionCall } from 'next/dist/compiled/@next/font/dist/google/validate-google-font-function-call';
+import { getGoogleFontsUrl } from 'next/dist/compiled/@next/font/dist/google/get-google-fonts-url';
+import { getFontAxes } from 'next/dist/compiled/@next/font/dist/google/get-font-axes';
+import { fetchCSSFromGoogleFonts } from 'next/dist/compiled/@next/font/dist/google/fetch-css-from-google-fonts';
 import type { LoaderOptions } from '../types';
 
-const cssCache = new Map<string, Promise<string>>();
+const cssCache = new Map<string, string>();
 
 export async function getFontFaceDeclarations(options: LoaderOptions) {
-  const {
-    fetchCSSFromGoogleFonts,
-    getFontAxes,
-    getUrl,
-    validateData,
-  } = require('../utils/google-font-utils');
-
-  const { fontFamily, weights, styles, selectedVariableAxes, display, variable } = validateData(
-    options.fontFamily,
-    [options.props],
-    null
-  );
+  const { fontFamily, weights, styles, selectedVariableAxes, display, variable } =
+    validateGoogleFontFunctionCall(options.fontFamily, options.props);
 
   const fontAxes = getFontAxes(fontFamily, weights, styles, selectedVariableAxes);
-  const url = getUrl(fontFamily, fontAxes, display);
+  const url = getGoogleFontsUrl(fontFamily, fontAxes, display);
 
   try {
     const hasCachedCSS = cssCache.has(url);
     const fontFaceCSS = hasCachedCSS
       ? cssCache.get(url)
-      : await fetchCSSFromGoogleFonts(url, fontFamily).catch(() => null);
+      : await fetchCSSFromGoogleFonts(url, fontFamily, true).catch(() => null);
     if (!hasCachedCSS) {
-      cssCache.set(url, fontFaceCSS);
+      cssCache.set(url, fontFaceCSS as string);
     } else {
       cssCache.delete(url);
     }

code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts

@@ -2,6 +2,7 @@
 // @ts-expect-error
 import loaderUtils from 'next/dist/compiled/loader-utils3';
 import { getProjectRoot } from '@storybook/core-common';
+import { validateLocalFontFunctionCall } from 'next/dist/compiled/@next/font/dist/local/validate-local-font-function-call';
 import path from 'path';
 
 import type { LoaderOptions } from '../types';
@@ -20,8 +21,12 @@ export async function getFontFaceDeclarations(
     ? path.dirname(path.join(getProjectRoot(), options.filename)).replace(rootContext, '')
     : path.dirname(options.filename).replace(rootContext, '');
 
-  const { validateData } = require('../utils/local-font-utils');
-  const { weight, style, variable, declarations = [] } = validateData('', options.props);
+  const {
+    weight,
+    style,
+    variable,
+    declarations = [],
+  } = validateLocalFontFunctionCall('', options.props);
 
   const id = `font-${loaderUtils.getHashDigest(
     Buffer.from(JSON.stringify(localFontSrc)),