Add exports for new router (#41368)

Adds `next/navigation` and `next/headers` APIs. Docs will follow later.. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-10-13 11:13:39 +02:00 · 2022-10-13 11:13:39 +02:00 · 562b5a380e
commit 562b5a380e
parent a315c748c7
34 changed files with 46 additions and 28 deletions
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@ -863,6 +863,16 @@ export default async function getBaseWebpackConfig(
      // let this alias hit before `next` alias.
      ...(isEdgeServer
        ? {
+            // app-router-context can not be ESM and CJS so force CJS
+            'next/dist/shared/lib/app-router-context': path.join(
+              __dirname,
+              '../dist/shared/lib/app-router-context.js'
+            ),
+            'next/dist/client/components': path.join(
+              __dirname,
+              '../client/components'
+            ),
+
            'next/dist/client': 'next/dist/esm/client',
            'next/dist/shared': 'next/dist/esm/shared',
            'next/dist/pages': 'next/dist/esm/pages',
@ -1057,7 +1067,7 @@ export default async function getBaseWebpackConfig(
      }

      const notExternalModules =
-        /^(?:private-next-pages\/|next\/(?:dist\/pages\/|(?:app|document|link|image|future\/image|constants|dynamic|script)$)|string-hash|private-next-rsc-mod-ref-proxy$)/
+        /^(?:private-next-pages\/|next\/(?:dist\/pages\/|(?:app|document|link|image|future\/image|constants|dynamic|script|navigation|headers)$)|string-hash|private-next-rsc-mod-ref-proxy$)/
      if (notExternalModules.test(request)) {
        return
      }
--- a/packages/next/client/components/hooks-server.ts
+++ b/packages/next/client/components/hooks-server.ts
--- a/packages/next/client/components/hooks-client.ts
+++ b/packages/next/client/components/hooks-client.ts
--- a/packages/next/client/components/react-dev-overlay/hot-reloader.tsx
+++ b/packages/next/client/components/react-dev-overlay/hot-reloader.tsx
@ -19,7 +19,7 @@ import {
 import type { DispatchFn } from './client'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
 import formatWebpackMessages from '../../dev/error-overlay/format-webpack-messages'
-import { useRouter } from '../hooks-client'
+import { useRouter } from '../navigation'
 import { errorOverlayReducer } from './internal/error-overlay-reducer'

 function getSocketProtocol(assetPrefix: string): string {
--- a/packages/next/headers.d.ts
+++ b/packages/next/headers.d.ts
@ -0,0 +1 @@
+export * from './dist/client/components/headers'
--- a/packages/next/headers.js
+++ b/packages/next/headers.js
@ -0,0 +1 @@
+module.exports = require('./dist/client/components/headers')
--- a/packages/next/navigation.d.ts
+++ b/packages/next/navigation.d.ts
@ -0,0 +1 @@
+export * from './dist/client/components/navigation'
--- a/packages/next/navigation.js
+++ b/packages/next/navigation.js
@ -0,0 +1 @@
+module.exports = require('./dist/client/components/navigation')
--- a/packages/next/package.json
+++ b/packages/next/package.json
@ -48,7 +48,11 @@
    "types/global.d.ts",
    "types/compiled.d.ts",
    "image-types/global.d.ts",
-    "font"
+    "font",
+    "navigation.js",
+    "navigation.d.ts",
+    "headers.js",
+    "headers.d.ts"
  ],
  "bin": {
    "next": "./dist/bin/next"
--- a/test/e2e/app-dir/app-edge/app/app-edge/layout.tsx
+++ b/test/e2e/app-dir/app-edge/app/app-edge/layout.tsx
@ -2,7 +2,7 @@

 // TODO-APP: support typing for useSelectedLayoutSegment
 // @ts-ignore
-import { useSelectedLayoutSegment } from 'next/dist/client/components/hooks-client'
+import { useSelectedLayoutSegment } from 'next/navigation'

 export default function Layout({ children }: { children: React.ReactNode }) {
  // useSelectedLayoutSegment should not be thrown
--- a/test/e2e/app-dir/app/app/error/ssr-error-client-component/page.js
+++ b/test/e2e/app-dir/app/app/error/ssr-error-client-component/page.js
@ -1,5 +1,5 @@
 import ClientComp from './client-component'
-import { headers } from 'next/dist/client/components/hooks-server'
+import { headers } from 'next/headers'

 export default function Page() {
  // Opt-in to SSR.
--- a/test/e2e/app-dir/app/app/hooks/use-cookies/client/page.js
+++ b/test/e2e/app-dir/app/app/hooks/use-cookies/client/page.js
@ -1,6 +1,6 @@
 'use client'

-import { cookies } from 'next/dist/client/components/hooks-server'
+import { cookies } from 'next/headers'

 export default function Page() {
  // This should throw an error.
--- a/test/e2e/app-dir/app/app/hooks/use-cookies/page.js
+++ b/test/e2e/app-dir/app/app/hooks/use-cookies/page.js
@ -1,4 +1,4 @@
-import { cookies } from 'next/dist/client/components/hooks-server'
+import { cookies } from 'next/headers'

 export default function Page() {
  const cookiesList = cookies()
--- a/test/e2e/app-dir/app/app/hooks/use-headers/client/page.js
+++ b/test/e2e/app-dir/app/app/hooks/use-headers/client/page.js
@ -1,6 +1,6 @@
 'use client'

-import { headers } from 'next/dist/client/components/hooks-server'
+import { headers } from 'next/headers'

 export default function Page() {
  // This should throw an error.
--- a/test/e2e/app-dir/app/app/hooks/use-headers/page.js
+++ b/test/e2e/app-dir/app/app/hooks/use-headers/page.js
@ -1,4 +1,4 @@
-import { headers } from 'next/dist/client/components/hooks-server'
+import { headers } from 'next/headers'

 export default function Page() {
  const headersList = headers()
--- a/test/e2e/app-dir/app/app/hooks/use-layout-segments/server/page.js
+++ b/test/e2e/app-dir/app/app/hooks/use-layout-segments/server/page.js
@ -1,6 +1,6 @@
 'use client'
 // TODO-APP: enable once test is not skipped.
-// import { useLayoutSegments } from 'next/dist/client/components/hooks-client'
+// import { useLayoutSegments } from 'next/navigation'

 export default function Page() {
  // This should throw an error.
--- a/test/e2e/app-dir/app/app/hooks/use-params/server/page.js
+++ b/test/e2e/app-dir/app/app/hooks/use-params/server/page.js
@ -1,5 +1,5 @@
 // TODO-APP: enable when implemented.
-// import { useParams } from 'next/dist/client/components/hooks-client'
+// import { useParams } from 'next/navigation'

 export default function Page() {
  // This should throw an error.
--- a/test/e2e/app-dir/app/app/hooks/use-pathname/page.js
+++ b/test/e2e/app-dir/app/app/hooks/use-pathname/page.js
@ -1,6 +1,6 @@
 'use client'

-import { usePathname } from 'next/dist/client/components/hooks-client'
+import { usePathname } from 'next/navigation'

 export default function Page() {
  const pathname = usePathname()
--- a/test/e2e/app-dir/app/app/hooks/use-pathname/server/page.js
+++ b/test/e2e/app-dir/app/app/hooks/use-pathname/server/page.js
@ -1,4 +1,4 @@
-// import { usePathname } from 'next/dist/client/components/hooks-client'
+// import { usePathname } from 'next/navigation'

 export default function Page() {
  // This should throw an error.
--- a/test/e2e/app-dir/app/app/hooks/use-preview-data/client/page.js
+++ b/test/e2e/app-dir/app/app/hooks/use-preview-data/client/page.js
@ -1,6 +1,6 @@
 'use client'

-import { previewData } from 'next/dist/client/components/hooks-server'
+import { previewData } from 'next/headers'

 export default function Page() {
  // This should throw an error.
--- a/test/e2e/app-dir/app/app/hooks/use-preview-data/page.js
+++ b/test/e2e/app-dir/app/app/hooks/use-preview-data/page.js
@ -1,4 +1,4 @@
-import { previewData } from 'next/dist/client/components/hooks-server'
+import { previewData } from 'next/headers'

 export default function Page() {
  const data = previewData()
--- a/test/e2e/app-dir/app/app/hooks/use-router/page.js
+++ b/test/e2e/app-dir/app/app/hooks/use-router/page.js
@ -1,6 +1,6 @@
 'use client'

-import { useRouter } from 'next/dist/client/components/hooks-client'
+import { useRouter } from 'next/navigation'

 export default function Page() {
  const router = useRouter()
--- a/test/e2e/app-dir/app/app/hooks/use-router/server/page.js
+++ b/test/e2e/app-dir/app/app/hooks/use-router/server/page.js
@ -1,4 +1,4 @@
-// import { useRouter } from 'next/dist/client/components/hooks-client'
+// import { useRouter } from 'next/navigation'

 export default function Page() {
  // This should throw an error.
--- a/test/e2e/app-dir/app/app/hooks/use-search-params/page.js
+++ b/test/e2e/app-dir/app/app/hooks/use-search-params/page.js
@ -1,6 +1,6 @@
 'use client'

-import { useSearchParams } from 'next/dist/client/components/hooks-client'
+import { useSearchParams } from 'next/navigation'

 export default function Page() {
  const params = useSearchParams()
--- a/test/e2e/app-dir/app/app/hooks/use-search-params/server/page.js
+++ b/test/e2e/app-dir/app/app/hooks/use-search-params/server/page.js
@ -1,4 +1,4 @@
-// import { useSearchParams } from 'next/dist/client/components/hooks-client'
+// import { useSearchParams } from 'next/navigation'

 export default function Page() {
  // This should throw an error.
--- a/test/e2e/app-dir/app/app/hooks/use-selected-layout-segment/server/page.js
+++ b/test/e2e/app-dir/app/app/hooks/use-selected-layout-segment/server/page.js
@ -1,6 +1,6 @@
 'use client'
 // TODO-APP: enable once test is not skipped.
-// import { useSelectedLayoutSegment } from 'next/dist/client/components/hooks-client'
+// import { useSelectedLayoutSegment } from 'next/navigation'

 export default function Page() {
  // This should throw an error.
--- a/test/e2e/app-dir/app/app/navigation/link.js
+++ b/test/e2e/app-dir/app/app/navigation/link.js
@ -1,6 +1,6 @@
 'use client'

-import { useRouter } from 'next/dist/client/components/hooks-client'
+import { useRouter } from 'next/navigation'
 import React from 'react'
 import { useEffect } from 'react'

--- a/test/e2e/app-dir/app/app/nested-navigation/CategoryNav.js
+++ b/test/e2e/app-dir/app/app/nested-navigation/CategoryNav.js
@ -1,7 +1,7 @@
 'use client'

 import { TabNavItem } from './TabNavItem'
-import { useSelectedLayoutSegment } from 'next/dist/client/components/hooks-client'
+import { useSelectedLayoutSegment } from 'next/navigation'

 const CategoryNav = ({ categories }) => {
  const selectedLayoutSegment = useSelectedLayoutSegment()
--- a/test/e2e/app-dir/app/app/nested-navigation/[categorySlug]/SubCategoryNav.js
+++ b/test/e2e/app-dir/app/app/nested-navigation/[categorySlug]/SubCategoryNav.js
@ -1,7 +1,7 @@
 'use client'

 import { TabNavItem } from '../TabNavItem'
-import { useSelectedLayoutSegment } from 'next/dist/client/components/hooks-client'
+import { useSelectedLayoutSegment } from 'next/navigation'

 const SubCategoryNav = ({ category }) => {
  const selectedLayoutSegment = useSelectedLayoutSegment()
--- a/test/e2e/app-dir/app/app/not-found/clientcomponent/a.js
+++ b/test/e2e/app-dir/app/app/not-found/clientcomponent/a.js
@ -1,6 +1,6 @@
 // TODO-APP: enable when flight error serialization is implemented
 import ClientComp from './client-component'
-import { headers } from 'next/dist/client/components/hooks-server'
+import { headers } from 'next/headers'

 export default function Page() {
  // Opt-in to SSR.
--- a/test/e2e/app-dir/app/app/old-router/page.js
+++ b/test/e2e/app-dir/app/app/old-router/page.js
@ -1,4 +1,4 @@
-import { cookies } from 'next/dist/client/components/hooks-server'
+import { cookies } from 'next/headers'
 import Router from './router'

 export default function Page() {
--- a/test/e2e/app-dir/app/app/redirect/clientcomponent/page.js
+++ b/test/e2e/app-dir/app/app/redirect/clientcomponent/page.js
@ -1,5 +1,5 @@
 import ClientComp from './client-component'
-import { headers } from 'next/dist/client/components/hooks-server'
+import { headers } from 'next/headers'

 export default function Page() {
  // Opt-in to SSR.
--- a/test/e2e/app-dir/rsc-basic/app/page.js
+++ b/test/e2e/app-dir/rsc-basic/app/page.js
@ -1,5 +1,5 @@
 import Nav from '../components/nav'
-import { headers } from 'next/dist/client/components/hooks-server'
+import { headers } from 'next/headers'

 const envVar = process.env.ENV_VAR_TEST
 const headerKey = 'x-next-test-client'
--- a/test/e2e/app-dir/rsc-basic/app/root-style-registry.js
+++ b/test/e2e/app-dir/rsc-basic/app/root-style-registry.js
@ -3,7 +3,7 @@
 import React from 'react'
 import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
 import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
-import { useServerInsertedHTML } from 'next/dist/client/components/hooks-client'
+import { useServerInsertedHTML } from 'next/navigation'
 import { useState } from 'react'

 export default function RootStyleRegistry({ children }) {
				`@ -0,0 +1 @@`
				`export * from './dist/client/components/headers'`
				`@ -0,0 +1 @@`
				`module.exports = require('./dist/client/components/headers')`