feat: use Next.js 16 (#2613)

gabrielmfern · web-flow · commit f11039a2d950 · 2025-10-30T13:08:54.000-03:00
diff --git a/apps/demo/package.json b/apps/demo/package.json
@@ -18,6 +18,6 @@
     "@react-email/preview-server": "workspace:*",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "next": "^15.3.2"
+    "next": "16.0.1"
   }
 }
diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -25,7 +25,7 @@
     "email-dev": "workspace:*",
     "framer-motion": "12.23.22",
     "lucide-react": "^0.544.0",
-    "next": "15.5.2",
+    "next": "16.0.1",
     "prism-react-renderer": "2.4.1",
     "react": "^19",
     "react-dom": "^19",
diff --git a/examples/resend/package.json b/examples/resend/package.json
@@ -9,7 +9,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "^15",
+    "next": "^16",
     "@react-email/components": "^0.0.36",
     "react": "^19",
     "react-dom": "^19",
diff --git a/examples/scaleway/next/package.json b/examples/scaleway/next/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@scaleway/sdk": "^1",
-    "next": "^15",
+    "next": "^16",
     "@react-email/components": "^0.0.36",
     "react": "^19",
     "react-dom": "^19"
diff --git a/packages/preview-server/next.config.ts b/packages/preview-server/next.config.ts
@@ -1,17 +1,7 @@
-/** @type {import('next').NextConfig} */
-module.exports = {
-  // this is needed so that the code for building emails works properly
-  webpack: (
-    /** @type {import('webpack').Configuration & { externals: string[] }} */
-    config,
-    { isServer },
-  ) => {
-    if (isServer) {
-      config.externals.push('esbuild');
-    }
+import type { NextConfig } from 'next';
 
-    return config;
-  },
+const nextConfig: NextConfig = {
+  serverExternalPackages: ['esbuild'],
   // Noticed an issue with typescript transpilation when going from Next 14.1.1 to 14.1.2
   // and I narrowed that down into this PR https://github.com/vercel/next.js/pull/62005
   //
@@ -20,3 +10,5 @@ module.exports = {
   // TODO: Open an issue on Nextjs about this.
   transpilePackages: ['react-email'],
 };
+
+export default nextConfig;
diff --git a/packages/preview-server/package.json b/packages/preview-server/package.json
@@ -40,7 +40,7 @@
     "json5": "2.2.3",
     "log-symbols": "4.1.0",
     "module-punycode": "npm:punycode@2.3.1",
-    "next": "15.5.2",
+    "next": "16.0.1",
     "node-html-parser": "7.0.1",
     "ora": "5.4.1",
     "pretty-bytes": "6.1.1",
diff --git a/packages/preview-server/tsconfig.json b/packages/preview-server/tsconfig.json
@@ -39,7 +39,8 @@
     "tailwind-internals.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
   "exclude": [".next", "dist", "node_modules"]
 }
diff --git a/packages/react-email/package.json b/packages/react-email/package.json
@@ -50,7 +50,7 @@
     "@types/babel__traverse": "7.20.7",
     "@types/mime-types": "2.1.4",
     "@types/prompts": "2.4.9",
-    "next": "^15.3.2",
+    "next": "16.0.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "typescript": "5.8.3"
diff --git a/packages/react-email/src/commands/build.ts b/packages/react-email/src/commands/build.ts
@@ -88,29 +88,17 @@ module.exports = {
     PREVIEW_SERVER_LOCATION: '${builtPreviewAppPath.replace(/\\/g, '/')}',
     USER_PROJECT_LOCATION: userProjectLocation
   },
-  // this is needed so that the code for building emails works properly
-  webpack: (
-    /** @type {import('webpack').Configuration & { externals: string[] }} */
-    config,
-    { isServer }
-  ) => {
-    if (isServer) {
-      config.externals.push('esbuild');
-    }
-
-    return config;
-  },
+  serverExternalPackages: ['esbuild'],
   typescript: {
     ignoreBuildErrors: true
   },
-  eslint: {
-    ignoreDuringBuilds: true
-  },
   experimental: {
     webpackBuildWorker: true
   },
 }`;
 
+  await fs.promises.rm(path.resolve(builtPreviewAppPath, './next.config.ts'));
+
   await fs.promises.writeFile(
     path.resolve(builtPreviewAppPath, './next.config.js'),
     nextConfigContents,
@@ -202,7 +190,8 @@ const updatePackageJson = async (builtPreviewAppPath: string) => {
     dependencies: Record<string, string>;
     devDependencies: Record<string, string>;
   };
-  packageJson.scripts.build = 'next build';
+  // Turbopack has some errors with the imports in @react-email/tailwind
+  packageJson.scripts.build = 'next build --webpack';
   packageJson.scripts.start = 'next start';
   delete packageJson.scripts.postbuild;
 
@@ -214,12 +203,6 @@ const updatePackageJson = async (builtPreviewAppPath: string) => {
     packageJson.dependencies[dependency] = version.replace('workspace:', '');
   }
 
-  // We remove this one to avoid having resolve issues on our demo build process.
-  // This is only used in the `export` command so it's irrelevant to have it here.
-  //
-  // See `src/actions/render-email-by-path` for more info on how we render the
-  // email templates without `@react-email/render` being installed.
-  delete packageJson.devDependencies['@react-email/render'];
   delete packageJson.devDependencies['@react-email/components'];
   delete packageJson.scripts.prepare;
 
diff --git a/packages/react-email/tsconfig.json b/packages/react-email/tsconfig.json
@@ -23,7 +23,7 @@
     "declaration": false,
     "declarationMap": false,
     "incremental": false,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "lib": ["dom", "dom.iterable", "esnext", "ESNext.AsyncIterable"],
     "noEmit": true,
     "strict": false,
diff --git a/packages/tailwind/src/index.ts b/packages/tailwind/src/index.ts
@@ -1,2 +1,4 @@
+export * from './inline-styles';
+export * from './sanitize-stylesheet';
 export * from './tailwind';
 export * from './utils/tailwindcss/setup-tailwind';
diff --git a/packages/tailwind/src/inline-styles.ts b/packages/tailwind/src/inline-styles.ts
@@ -0,0 +1,21 @@
+import type { StyleSheet } from 'css-tree';
+import { extractRulesPerClass } from './utils/css/extract-rules-per-class';
+import { getCustomProperties } from './utils/css/get-custom-properties';
+import { makeInlineStylesFor } from './utils/css/make-inline-styles-for';
+
+export function inlineStyles(
+  styleSheet: StyleSheet,
+  classes: string[],
+): Record<string, string> {
+  const { inlinable: inlinableRules } = extractRulesPerClass(
+    styleSheet,
+    classes,
+  );
+
+  const customProperties = getCustomProperties(styleSheet);
+
+  return makeInlineStylesFor(
+    Array.from(inlinableRules.values()),
+    customProperties,
+  );
+}
diff --git a/packages/tailwind/src/sanitize-stylesheet.ts b/packages/tailwind/src/sanitize-stylesheet.ts
@@ -0,0 +1,10 @@
+import type { StyleSheet } from 'css-tree';
+import { resolveAllCssVariables } from './utils/css/resolve-all-css-variables';
+import { resolveCalcExpressions } from './utils/css/resolve-calc-expressions';
+import { sanitizeDeclarations } from './utils/css/sanitize-declarations';
+
+export function sanitizeStyleSheet(styleSheet: StyleSheet) {
+  resolveAllCssVariables(styleSheet);
+  resolveCalcExpressions(styleSheet);
+  sanitizeDeclarations(styleSheet);
+}
diff --git a/packages/tailwind/src/tailwind.tsx b/packages/tailwind/src/tailwind.tsx
@@ -2,22 +2,17 @@ import { type CssNode, generate, List, type StyleSheet } from 'css-tree';
 import * as React from 'react';
 import type { Config } from 'tailwindcss';
 import { useSuspensedPromise } from './hooks/use-suspended-promise';
+import { sanitizeStyleSheet } from './sanitize-stylesheet';
 import { extractRulesPerClass } from './utils/css/extract-rules-per-class';
-import {
-  CustomProperty,
-  getCustomProperties,
-} from './utils/css/get-custom-properties';
+import { getCustomProperties } from './utils/css/get-custom-properties';
 import { makeInlineStylesFor } from './utils/css/make-inline-styles-for';
 import { resolveAllCssVariables } from './utils/css/resolve-all-css-variables';
 import { resolveCalcExpressions } from './utils/css/resolve-calc-expressions';
 import { sanitizeDeclarations } from './utils/css/sanitize-declarations';
 import { sanitizeNonInlinableRules } from './utils/css/sanitize-non-inlinable-rules';
 import { mapReactTree } from './utils/react/map-react-tree';
 import { cloneElementWithInlinedStyles } from './utils/tailwindcss/clone-element-with-inlined-styles';
-import {
-  setupTailwind,
-  TailwindSetup,
-} from './utils/tailwindcss/setup-tailwind';
+import { setupTailwind } from './utils/tailwindcss/setup-tailwind';
 
 export type TailwindConfig = Omit<Config, 'content'>;
 
@@ -91,29 +86,6 @@ export const pixelBasedPreset: TailwindConfig = {
   },
 };
 
-export function sanitizeStyleSheet(styleSheet: StyleSheet) {
-  resolveAllCssVariables(styleSheet);
-  resolveCalcExpressions(styleSheet);
-  sanitizeDeclarations(styleSheet);
-}
-
-export function inlineStyles(
-  styleSheet: StyleSheet,
-  classes: string[],
-): Record<string, string> {
-  const { inlinable: inlinableRules } = extractRulesPerClass(
-    styleSheet,
-    classes,
-  );
-
-  const customProperties = getCustomProperties(styleSheet);
-
-  return makeInlineStylesFor(
-    Array.from(inlinableRules.values()),
-    customProperties,
-  );
-}
-
 export function Tailwind({ children, config }: TailwindProps) {
   const tailwindSetup = useSuspensedPromise(
     () => setupTailwind(config ?? {}),
diff --git a/packages/tsconfig/nextjs.json b/packages/tsconfig/nextjs.json
@@ -8,7 +8,7 @@
     "declaration": false,
     "declarationMap": false,
     "incremental": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "lib": ["dom", "dom.iterable", "esnext"],
     "module": "esnext",
     "noEmit": true,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,6 @@`
`18`	`18`	`"@react-email/preview-server": "workspace:*",`
`19`	`19`	`"@types/react": "^19",`
`20`	`20`	`"@types/react-dom": "^19",`
`21`		`- "next": "^15.3.2"`
	`21`	`+ "next": "16.0.1"`
`22`	`22`	`}`
`23`	`23`	`}`