diff --git a/.github/workflows/build_test_deploy.yml b/.github/workflows/build_test_deploy.yml index 41924ec9d929..c4685e243ad2 100644 --- a/.github/workflows/build_test_deploy.yml +++ b/.github/workflows/build_test_deploy.yml @@ -1441,7 +1441,7 @@ jobs: if: ${{ needs.build.outputs.isRelease == 'true' }} needs: build name: stable - x86_64-unknown-freebsd - node@16 - runs-on: macos-10.15 + runs-on: macos-12 steps: - name: tune mac network run: sudo sysctl -w net.link.generic.system.hwcksum_tx=0 && sudo sysctl -w net.link.generic.system.hwcksum_rx=0 @@ -1456,7 +1456,7 @@ jobs: rm -rf test - name: Build id: build - uses: vmactions/freebsd-vm@v0.1.6 + uses: vmactions/freebsd-vm@v0.2.0 env: DEBUG: napi:* RUSTUP_HOME: /usr/local/rustup diff --git a/examples/convex/README.md b/examples/convex/README.md index 1daf2d81e67c..38c329b0e3e0 100644 --- a/examples/convex/README.md +++ b/examples/convex/README.md @@ -20,16 +20,28 @@ yarn create next-app --example with-convex with-convex-app pnpm create next-app --example with-convex with-convex-app ``` -After creating a [Convex account](https://www.convex.dev) and getting a beta key, +Log in to Convex, ```bash -npx convex init --beta-key +npx convex login ``` -Next, push the Convex functions for this project. +initialize a new Convex project, + +```bash +npx convex init +``` + +and push the Convex functions for this project. ```bash npx convex push ``` +Now you can run your code locally with a Convex backend with + +```bash +npm run dev +``` + Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/convex/convex/README.md b/examples/convex/convex/README.md index 639e0a21bbd8..e4bfbb0a5937 100644 --- a/examples/convex/convex/README.md +++ b/examples/convex/convex/README.md @@ -1,45 +1,29 @@ -# Welcome to your functions directory +# Welcome to your Convex functions directory! -Write your convex functions in this directory. +Write your Convex functions here. -A query function (how you read data) looks like this: +A query function looks like: ```typescript -// getCounter.ts +// myQueryFunction.ts import { query } from './_generated/server' -export default query(async ({ db }): Promise => { - const counterDoc = await db.table('counter_table').first() - console.log('Got stuff') - if (counterDoc === null) { - return 0 - } - return counterDoc.counter +export default query(async ({ db }) => { + // Load data with `db` here! }) ``` -A mutation function (how you write data) looks like this: +A mutation function looks like: ```typescript -// incrementCounter.ts +// myMutationFunction.ts import { mutation } from './_generated/server' -export default mutation(async ({ db }, increment: number) => { - let counterDoc = await db.table('counter_table').first() - if (counterDoc === null) { - counterDoc = { - counter: increment, - } - db.insert('counter_table', counterDoc) - } else { - counterDoc.counter += increment - db.replace(counterDoc._id, counterDoc) - } - // Like console.log but relays log messages from the server to client. - console.log(`Value of counter is now ${counterDoc.counter}`) +export default mutation(async ({ db }) => { + // Edit data with `db` here! }) ``` -The convex cli is your friend. See everything it can do by running +The Convex CLI is your friend. See everything it can do by running `npx convex -h` in your project root directory. To learn more, launch the docs with `npx convex docs`. diff --git a/examples/convex/package.json b/examples/convex/package.json index d21a26b138c2..daee8a99275a 100644 --- a/examples/convex/package.json +++ b/examples/convex/package.json @@ -9,7 +9,7 @@ "next": "latest", "react": "^18.2.0", "react-dom": "^18.2.0", - "convex-dev": "0.1.4" + "convex": "^0.1.6" }, "devDependencies": { "@types/node": "~16.11.12", diff --git a/examples/convex/pages/_app.tsx b/examples/convex/pages/_app.tsx index da837f4c99c1..b6575f9c6346 100644 --- a/examples/convex/pages/_app.tsx +++ b/examples/convex/pages/_app.tsx @@ -1,7 +1,7 @@ import '../styles/globals.css' import type { AppProps } from 'next/app' -import { ConvexProvider, ConvexReactClient } from 'convex-dev/react' +import { ConvexProvider, ConvexReactClient } from 'convex/react' import convexConfig from '../convex.json' const convex = new ConvexReactClient(convexConfig.origin) diff --git a/examples/with-cypress/.gitignore b/examples/with-cypress/.gitignore index 1437c53f70bc..88b6f0d98164 100644 --- a/examples/with-cypress/.gitignore +++ b/examples/with-cypress/.gitignore @@ -32,3 +32,6 @@ yarn-error.log* # vercel .vercel + +# typescript +*.tsbuildinfo diff --git a/examples/with-cypress/cypress.config.ts b/examples/with-cypress/cypress.config.ts new file mode 100644 index 000000000000..b63e356440e3 --- /dev/null +++ b/examples/with-cypress/cypress.config.ts @@ -0,0 +1,7 @@ +const { defineConfig } = require('cypress') + +module.exports = defineConfig({ + e2e: { + baseUrl: 'http://localhost:3000', + }, +}) diff --git a/examples/with-cypress/cypress.json b/examples/with-cypress/cypress.json deleted file mode 100644 index 17ef242e711f..000000000000 --- a/examples/with-cypress/cypress.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "baseUrl": "http://localhost:3000" -} diff --git a/examples/with-cypress/cypress/integration/app.spec.js b/examples/with-cypress/cypress/e2e/app.cy.ts similarity index 100% rename from examples/with-cypress/cypress/integration/app.spec.js rename to examples/with-cypress/cypress/e2e/app.cy.ts diff --git a/examples/with-cypress/cypress/plugins/index.js b/examples/with-cypress/cypress/plugins/index.js deleted file mode 100644 index 59b2bab6e4e6..000000000000 --- a/examples/with-cypress/cypress/plugins/index.js +++ /dev/null @@ -1,22 +0,0 @@ -/// -// *********************************************************** -// This example plugins/index.js can be used to load plugins -// -// You can change the location of this file or turn off loading -// the plugins file with the 'pluginsFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/plugins-guide -// *********************************************************** - -// This function is called when a project is opened or re-opened (e.g. due to -// the project's config changing) - -/** - * @type {Cypress.PluginConfig} - */ -// eslint-disable-next-line no-unused-vars -module.exports = (on, config) => { - // `on` is used to hook into various events Cypress emits - // `config` is the resolved Cypress config -} diff --git a/examples/with-cypress/cypress/support/commands.js b/examples/with-cypress/cypress/support/commands.ts similarity index 60% rename from examples/with-cypress/cypress/support/commands.js rename to examples/with-cypress/cypress/support/commands.ts index 119ab03f7cda..95857aea4cdf 100644 --- a/examples/with-cypress/cypress/support/commands.js +++ b/examples/with-cypress/cypress/support/commands.ts @@ -1,5 +1,6 @@ +/// // *********************************************** -// This example commands.js shows you how to +// This example commands.ts shows you how to // create various custom commands and overwrite // existing commands. // @@ -23,3 +24,14 @@ // // -- This will overwrite an existing command -- // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) +// +// declare global { +// namespace Cypress { +// interface Chainable { +// login(email: string, password: string): Chainable +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/examples/with-cypress/cypress/support/index.js b/examples/with-cypress/cypress/support/e2e.ts similarity index 92% rename from examples/with-cypress/cypress/support/index.js rename to examples/with-cypress/cypress/support/e2e.ts index d68db96df269..ed5730de1148 100644 --- a/examples/with-cypress/cypress/support/index.js +++ b/examples/with-cypress/cypress/support/e2e.ts @@ -1,5 +1,5 @@ // *********************************************************** -// This example support/index.js is processed and +// This example support/e2e.ts is processed and // loaded automatically before your test files. // // This is a great place to put global configuration and diff --git a/examples/with-cypress/cypress/tsconfig.json b/examples/with-cypress/cypress/tsconfig.json new file mode 100644 index 000000000000..18edb199acdb --- /dev/null +++ b/examples/with-cypress/cypress/tsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress", "node"] + }, + "include": ["**/*.ts"] +} diff --git a/examples/with-cypress/next-env.d.ts b/examples/with-cypress/next-env.d.ts new file mode 100644 index 000000000000..4f11a03dc6cc --- /dev/null +++ b/examples/with-cypress/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/with-cypress/package.json b/examples/with-cypress/package.json index d277dee94d4a..a3b47a25ac36 100644 --- a/examples/with-cypress/package.json +++ b/examples/with-cypress/package.json @@ -11,11 +11,15 @@ }, "dependencies": { "next": "latest", - "react": "17.0.2", - "react-dom": "17.0.2" + "react": "18.2.0", + "react-dom": "18.2.0" }, "devDependencies": { - "cypress": "8.2.0", - "start-server-and-test": "1.13.1" + "@types/node": "18.0.6", + "@types/react": "18.0.15", + "@types/react-dom": "18.0.6", + "cypress": "10.3.1", + "start-server-and-test": "1.14.0", + "typescript": "4.7.4" } } diff --git a/examples/with-cypress/pages/_app.js b/examples/with-cypress/pages/_app.tsx similarity index 50% rename from examples/with-cypress/pages/_app.js rename to examples/with-cypress/pages/_app.tsx index 1e1cec92425c..c7e1bbcd1aef 100644 --- a/examples/with-cypress/pages/_app.js +++ b/examples/with-cypress/pages/_app.tsx @@ -1,6 +1,7 @@ +import type { AppProps } from 'next/app' import '../styles/globals.css' -function MyApp({ Component, pageProps }) { +function MyApp({ Component, pageProps }: AppProps) { return } diff --git a/examples/with-cypress/pages/about.js b/examples/with-cypress/pages/about.tsx similarity index 100% rename from examples/with-cypress/pages/about.js rename to examples/with-cypress/pages/about.tsx diff --git a/examples/with-cypress/pages/index.js b/examples/with-cypress/pages/index.tsx similarity index 100% rename from examples/with-cypress/pages/index.js rename to examples/with-cypress/pages/index.tsx diff --git a/examples/with-cypress/tsconfig.json b/examples/with-cypress/tsconfig.json new file mode 100644 index 000000000000..b8d597880a1a --- /dev/null +++ b/examples/with-cypress/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} diff --git a/examples/with-dynamic-import/.gitignore b/examples/with-dynamic-import/.gitignore index 1437c53f70bc..ab8b66ddcd18 100644 --- a/examples/with-dynamic-import/.gitignore +++ b/examples/with-dynamic-import/.gitignore @@ -32,3 +32,6 @@ yarn-error.log* # vercel .vercel + +# TypeScript +*.tsbuildinfo \ No newline at end of file diff --git a/examples/with-dynamic-import/components/Header.js b/examples/with-dynamic-import/components/Header.tsx similarity index 58% rename from examples/with-dynamic-import/components/Header.js rename to examples/with-dynamic-import/components/Header.tsx index ae4bfb475243..1f4841f34282 100644 --- a/examples/with-dynamic-import/components/Header.js +++ b/examples/with-dynamic-import/components/Header.tsx @@ -4,18 +4,12 @@ export default function Header() { return (
- Home + Home - About + About
) } - -const styles = { - a: { - marginRight: 10, - }, -} diff --git a/examples/with-dynamic-import/components/hello1.js b/examples/with-dynamic-import/components/hello1.tsx similarity index 100% rename from examples/with-dynamic-import/components/hello1.js rename to examples/with-dynamic-import/components/hello1.tsx diff --git a/examples/with-dynamic-import/components/hello2.js b/examples/with-dynamic-import/components/hello2.tsx similarity index 100% rename from examples/with-dynamic-import/components/hello2.js rename to examples/with-dynamic-import/components/hello2.tsx diff --git a/examples/with-dynamic-import/components/hello3.js b/examples/with-dynamic-import/components/hello3.tsx similarity index 100% rename from examples/with-dynamic-import/components/hello3.js rename to examples/with-dynamic-import/components/hello3.tsx diff --git a/examples/with-dynamic-import/components/hello4.js b/examples/with-dynamic-import/components/hello4.tsx similarity index 100% rename from examples/with-dynamic-import/components/hello4.js rename to examples/with-dynamic-import/components/hello4.tsx diff --git a/examples/with-dynamic-import/components/hello5.js b/examples/with-dynamic-import/components/hello5.tsx similarity index 100% rename from examples/with-dynamic-import/components/hello5.js rename to examples/with-dynamic-import/components/hello5.tsx diff --git a/examples/with-dynamic-import/next-env.d.ts b/examples/with-dynamic-import/next-env.d.ts new file mode 100644 index 000000000000..4f11a03dc6cc --- /dev/null +++ b/examples/with-dynamic-import/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/with-dynamic-import/package.json b/examples/with-dynamic-import/package.json index 077ab3ccf98a..db6ba2c492aa 100644 --- a/examples/with-dynamic-import/package.json +++ b/examples/with-dynamic-import/package.json @@ -3,13 +3,17 @@ "scripts": { "dev": "next", "build": "next build", - "export": "next export", "start": "next start" }, "dependencies": { - "fuse.js": "6.4.1", + "fuse.js": "6.6.2", "next": "latest", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/node": "^18", + "@types/react": "^18", + "typescript": "^4.7.4" } } diff --git a/examples/with-dynamic-import/pages/about.js b/examples/with-dynamic-import/pages/about.js deleted file mode 100644 index 0434e5e05a98..000000000000 --- a/examples/with-dynamic-import/pages/about.js +++ /dev/null @@ -1,10 +0,0 @@ -import Header from '../components/Header' - -const About = () => ( -
-
-

This is the about page.

-
-) - -export default About diff --git a/examples/with-dynamic-import/pages/index.js b/examples/with-dynamic-import/pages/index.tsx similarity index 100% rename from examples/with-dynamic-import/pages/index.js rename to examples/with-dynamic-import/pages/index.tsx diff --git a/examples/with-dynamic-import/tsconfig.json b/examples/with-dynamic-import/tsconfig.json new file mode 100644 index 000000000000..b8d597880a1a --- /dev/null +++ b/examples/with-dynamic-import/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} diff --git a/lerna.json b/lerna.json index 5b5a548e794c..9518bd1e3951 100644 --- a/lerna.json +++ b/lerna.json @@ -16,5 +16,5 @@ "registry": "https://registry.npmjs.org/" } }, - "version": "12.2.3-canary.15" + "version": "12.2.3-canary.16" } diff --git a/package.json b/package.json index 764331e45dc9..bb6c0a8b2097 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "@babel/plugin-proposal-object-rest-spread": "7.14.7", "@babel/preset-flow": "7.14.5", "@babel/preset-react": "7.14.5", - "@edge-runtime/jest-environment": "1.1.0-beta.11", + "@edge-runtime/jest-environment": "1.1.0-beta.17", "@fullhuman/postcss-purgecss": "1.3.0", "@mdx-js/loader": "0.18.0", "@next/bundle-analyzer": "workspace:*", diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json index b9aee88071ec..2d01192a158d 100644 --- a/packages/create-next-app/package.json +++ b/packages/create-next-app/package.json @@ -1,6 +1,6 @@ { "name": "create-next-app", - "version": "12.2.3-canary.15", + "version": "12.2.3-canary.16", "keywords": [ "react", "next", diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json index 6db04602767f..2011bf18796e 100644 --- a/packages/eslint-config-next/package.json +++ b/packages/eslint-config-next/package.json @@ -1,6 +1,6 @@ { "name": "eslint-config-next", - "version": "12.2.3-canary.15", + "version": "12.2.3-canary.16", "description": "ESLint configuration used by NextJS.", "main": "index.js", "license": "MIT", @@ -9,7 +9,7 @@ "directory": "packages/eslint-config-next" }, "dependencies": { - "@next/eslint-plugin-next": "12.2.3-canary.15", + "@next/eslint-plugin-next": "12.2.3-canary.16", "@rushstack/eslint-patch": "^1.1.3", "@typescript-eslint/parser": "^5.21.0", "eslint-import-resolver-node": "^0.3.6", diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json index 0d2523b0c986..fb25695749e5 100644 --- a/packages/eslint-plugin-next/package.json +++ b/packages/eslint-plugin-next/package.json @@ -1,6 +1,6 @@ { "name": "@next/eslint-plugin-next", - "version": "12.2.3-canary.15", + "version": "12.2.3-canary.16", "description": "ESLint plugin for NextJS.", "main": "lib/index.js", "license": "MIT", diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json index 5a9d517ed6fa..a0ce0df11fac 100644 --- a/packages/next-bundle-analyzer/package.json +++ b/packages/next-bundle-analyzer/package.json @@ -1,6 +1,6 @@ { "name": "@next/bundle-analyzer", - "version": "12.2.3-canary.15", + "version": "12.2.3-canary.16", "main": "index.js", "types": "index.d.ts", "license": "MIT", diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json index f3da911cb9b3..d26b93de2162 100644 --- a/packages/next-codemod/package.json +++ b/packages/next-codemod/package.json @@ -1,6 +1,6 @@ { "name": "@next/codemod", - "version": "12.2.3-canary.15", + "version": "12.2.3-canary.16", "license": "MIT", "dependencies": { "chalk": "4.1.0", diff --git a/packages/next-env/package.json b/packages/next-env/package.json index af0a0c28d5d1..f7423ccf7914 100644 --- a/packages/next-env/package.json +++ b/packages/next-env/package.json @@ -1,6 +1,6 @@ { "name": "@next/env", - "version": "12.2.3-canary.15", + "version": "12.2.3-canary.16", "keywords": [ "react", "next", diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json index 4a3253779cfc..f1597eb7881e 100644 --- a/packages/next-mdx/package.json +++ b/packages/next-mdx/package.json @@ -1,6 +1,6 @@ { "name": "@next/mdx", - "version": "12.2.3-canary.15", + "version": "12.2.3-canary.16", "main": "index.js", "license": "MIT", "repository": { diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json index bfb687791294..ba120f0369d3 100644 --- a/packages/next-plugin-storybook/package.json +++ b/packages/next-plugin-storybook/package.json @@ -1,6 +1,6 @@ { "name": "@next/plugin-storybook", - "version": "12.2.3-canary.15", + "version": "12.2.3-canary.16", "repository": { "url": "vercel/next.js", "directory": "packages/next-plugin-storybook" diff --git a/packages/next-polyfill-module/package.json b/packages/next-polyfill-module/package.json index d082bac0a869..8e8f50bef225 100644 --- a/packages/next-polyfill-module/package.json +++ b/packages/next-polyfill-module/package.json @@ -1,6 +1,6 @@ { "name": "@next/polyfill-module", - "version": "12.2.3-canary.15", + "version": "12.2.3-canary.16", "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)", "main": "dist/polyfill-module.js", "license": "MIT", diff --git a/packages/next-polyfill-nomodule/package.json b/packages/next-polyfill-nomodule/package.json index 7d8d8880c212..672601414323 100644 --- a/packages/next-polyfill-nomodule/package.json +++ b/packages/next-polyfill-nomodule/package.json @@ -1,6 +1,6 @@ { "name": "@next/polyfill-nomodule", - "version": "12.2.3-canary.15", + "version": "12.2.3-canary.16", "description": "A polyfill for non-dead, nomodule browsers.", "main": "dist/polyfill-nomodule.js", "license": "MIT", diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json index 62bba314ce3e..5103ba1469c1 100644 --- a/packages/next-swc/package.json +++ b/packages/next-swc/package.json @@ -1,6 +1,6 @@ { "name": "@next/swc", - "version": "12.2.3-canary.15", + "version": "12.2.3-canary.16", "private": true, "scripts": { "build-native": "napi build --platform -p next-swc-napi --cargo-name next_swc_napi native --features plugin", diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/packages/next/build/webpack/config/blocks/css/index.ts index d6b734173ff0..1177e746a649 100644 --- a/packages/next/build/webpack/config/blocks/css/index.ts +++ b/packages/next/build/webpack/config/blocks/css/index.ts @@ -470,7 +470,8 @@ export const css = curry(async function css( ) } - if (ctx.isClient && ctx.isProduction) { + // Enable full mini-css-extract-plugin hmr for prod mode pages or app dir + if (ctx.isClient && (ctx.isProduction || ctx.experimental.appDir)) { // Extract CSS as CSS file(s) in the client-side production bundle. const MiniCssExtractPlugin = require('../../../plugins/mini-css-extract-plugin').default @@ -478,8 +479,12 @@ export const css = curry(async function css( plugin( // @ts-ignore webpack 5 compat new MiniCssExtractPlugin({ - filename: 'static/css/[contenthash].css', - chunkFilename: 'static/css/[contenthash].css', + filename: ctx.isProduction + ? 'static/css/[contenthash].css' + : 'static/css/[name].css', + chunkFilename: ctx.isProduction + ? 'static/css/[contenthash].css' + : 'static/css/[name].css', // Next.js guarantees that CSS order "doesn't matter", due to imposed // restrictions: // 1. Global CSS can only be defined in a single entrypoint (_app) diff --git a/packages/next/build/webpack/config/blocks/css/loaders/client.ts b/packages/next/build/webpack/config/blocks/css/loaders/client.ts index ce4f0f9820f6..427898caf5da 100644 --- a/packages/next/build/webpack/config/blocks/css/loaders/client.ts +++ b/packages/next/build/webpack/config/blocks/css/loaders/client.ts @@ -9,37 +9,30 @@ export function getClientStyleLoader({ isDevelopment: boolean assetPrefix: string }): webpack.RuleSetUseItem { - if (isDevelopment) { + // Keep next-style-loader for development mode in `pages/` + if (isDevelopment && !isAppDir) { return { loader: 'next-style-loader', options: { - insert: isAppDir - ? function (element: Node) { - // There is currently no anchor element in . - // We temporarily insert the element as the last child - // of the first . - const head = document.querySelector('head')! - head.insertBefore(element, head.lastChild) - } - : function (element: Node) { - // By default, style-loader injects CSS into the bottom - // of . This causes ordering problems between dev - // and prod. To fix this, we render a