Add exports for new router (vercel#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>
Kikobeats · Oct 24, 2022 · 0bf74e8 · 0bf74e8
1 parent 721ad89
commit 0bf74e8
Show file tree

Hide file tree

Showing 34 changed files with 46 additions and 28 deletions.
diff --git 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
       }

diff --git a/...es/next/client/components/hooks-server.ts → packages/next/client/components/headers.ts b/...es/next/client/components/hooks-server.ts → packages/next/client/components/headers.ts
diff --git a/...es/next/client/components/hooks-client.ts → ...ages/next/client/components/navigation.ts b/...es/next/client/components/hooks-client.ts → ...ages/next/client/components/navigation.ts
diff --git 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 {

diff --git a/packages/next/headers.d.ts b/packages/next/headers.d.ts
@@ -0,0 +1 @@
+export * from './dist/client/components/headers'
diff --git a/packages/next/headers.js b/packages/next/headers.js
@@ -0,0 +1 @@
+module.exports = require('./dist/client/components/headers')
diff --git a/packages/next/navigation.d.ts b/packages/next/navigation.d.ts
@@ -0,0 +1 @@
+export * from './dist/client/components/navigation'
diff --git a/packages/next/navigation.js b/packages/next/navigation.js
@@ -0,0 +1 @@
+module.exports = require('./dist/client/components/navigation')
diff --git 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"

diff --git 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

diff --git 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.

diff --git 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.

diff --git 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()

diff --git 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.

diff --git 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()

diff --git 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.

diff --git 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.

diff --git 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()

diff --git 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.

diff --git 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.

diff --git 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()

diff --git 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()

diff --git 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.

diff --git 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()

diff --git 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.

diff --git 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.

diff --git 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'
 

diff --git 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()

diff --git 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()

diff --git 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.

diff --git 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() {

diff --git 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.

diff --git 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'

diff --git 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 }) {