disallow next/rootparams in route handlers and server actions

Author: lubieowoce

packages/next/errors.json

@@ -715,5 +715,7 @@
   "714": "%s must not be used within a client component. Next.js should be preventing it from being included in client components statically, but did not in this case.",
   "715": "Route %s used %s in Pages Router. This API is only available within App Router.",
   "716": "\\`unstable_rootParams\\` must not be used within a client component. Next.js should be preventing it from being included in client components statically, but did not in this case.",
-  "717": "Missing workStore in %s"
+  "717": "Missing workStore in %s",
+  "718": "Route %s used %s inside a Route Handler. Support for this API in Route Handlers is planned for a future version of Next.js.",
+  "719": "%s was used inside a Server Action. This is not supported. Functions from 'next/rootparams' can only be called in the context of a route."
 }

packages/next/src/server/request/root-params.ts

@@ -20,6 +20,7 @@ import {
   describeStringPropertyAccess,
   wellKnownProperties,
 } from '../../shared/lib/utils/reflect-utils'
+import { actionAsyncStorage } from '../app-render/action-async-storage.external'
 
 interface CacheLifetime {}
 const CachedParams = new WeakMap<CacheLifetime, Promise<Params>>()
@@ -208,6 +209,23 @@ export async function getRootParam(paramName: string): Promise<ParamValue> {
     throw new InvariantError(`Missing workStore in ${apiName}`)
   }
 
+  const actionStore = actionAsyncStorage.getStore()
+  if (actionStore) {
+    if (actionStore.isAppRoute) {
+      // TODO(root-params): add support for route handlers
+      throw new Error(
+        `Route ${workStore.route} used ${apiName} inside a Route Handler. Support for this API in Route Handlers is planned for a future version of Next.js.`
+      )
+    }
+    if (actionStore.isAction) {
+      // Actions are not fundamentally tied to a route (even if they're always submitted from some page),
+      // so root params would be inconsistent if an action is called from multiple roots.
+      throw new Error(
+        `${apiName} was used inside a Server Action. This is not supported. Functions from 'next/rootparams' can only be called in the context of a route.`
+      )
+    }
+  }
+
   const workUnitStore = workUnitAsyncStorage.getStore()
 
   if (!workUnitStore) {

test/e2e/app-dir/app-root-params-getters/fixtures/simple/app/[lang]/[locale]/server-action/page.tsx

@@ -0,0 +1,15 @@
+import { lang } from 'next/root-params'
+
+export default function Page() {
+  return (
+    <form
+      action={async () => {
+        'use server'
+        // not allowed, should error
+        await lang()
+      }}
+    >
+      <button type="submit">Submit form</button>
+    </form>
+  )
+}

test/e2e/app-dir/app-root-params-getters/simple.test.ts

@@ -3,9 +3,10 @@ import { assertNoRedbox, retry } from 'next-test-utils'
 import { join } from 'path'
 import { createSandbox } from 'development-sandbox'
 import { outdent } from 'outdent'
+import { createRequestTracker } from '../../../lib/e2e-utils/request-tracker'
 
 describe('app-root-param-getters - simple', () => {
-  const { next, isNextDev, isTurbopack } = nextTestSetup({
+  const { next, isNextDev, isTurbopack, isNextDeploy } = nextTestSetup({
     files: join(__dirname, 'fixtures', 'simple'),
   })
 
@@ -89,18 +90,44 @@ describe('app-root-param-getters - simple', () => {
     })
   }
 
-  // root params currently don't work in route handlers.
-  it.failing(
-    'should allow reading root params in a route handler',
-    async () => {
-      const params = { lang: 'en', locale: 'us' }
-      const response = await next.fetch(
-        `/${params.lang}/${params.locale}/route-handler`
+  it('should error when used in a server action', async () => {
+    const params = { lang: 'en', locale: 'us' }
+    const browser = await next.browser(
+      `/${params.lang}/${params.locale}/server-action`
+    )
+    const tracker = createRequestTracker(browser)
+    const [, response] = await tracker.captureResponse(
+      async () => {
+        await browser.elementByCss('button[type="submit"]').click()
+      },
+      {
+        request: {
+          method: 'POST',
+          pathname: `/${params.lang}/${params.locale}/server-action`,
+        },
+      }
+    )
+    expect(response.status()).toBe(500)
+    if (!isNextDeploy) {
+      expect(next.cliOutput).toInclude(
+        "`import('next/root-params').lang()` was used inside a Server Action. This is not supported. Functions from 'next/rootparams' can only be called in the context of a route."
+      )
+    }
+  })
+
+  // TODO(root-params): add support for route handlers
+  it('should error when used in a route handler (until we implement it)', async () => {
+    const params = { lang: 'en', locale: 'us' }
+    const response = await next.fetch(
+      `/${params.lang}/${params.locale}/route-handler`
+    )
+    expect(response.status).toBe(500)
+    if (!isNextDeploy) {
+      expect(next.cliOutput).toInclude(
+        "Route /[lang]/[locale]/route-handler used `import('next/root-params').lang()` inside a Route Handler. Support for this API in Route Handlers is planned for a future version of Next.js."
       )
-      expect(response.status).toBe(200)
-      expect(await response.json()).toEqual(params)
     }
-  )
+  })
 })
 
 /** Run cleanup after the current test. */