support @children

packages/next/src/build/webpack/loaders/next-app-loader.ts

@@ -107,6 +107,9 @@ async function createAppRouteCode({
   `
 }
 
+const normalizeParallelKey = (key: string) =>
+  key.startsWith('@') ? key.slice(1) : key
+
 async function createTreeCodeFromPath(
   pagePath: string,
   {
@@ -158,7 +161,7 @@ async function createTreeCodeFromPath(
         const stat = await fs.stat(filePath)
 
         if (stat.isDirectory() && file.startsWith('@')) {
-          parallelSegments.push(file.slice(1))
+          parallelSegments.push(file)
         }
       })
     )
@@ -209,14 +212,14 @@ async function createTreeCodeFromPath(
     for (const [parallelKey, parallelSegment] of parallelSegments) {
       if (parallelSegment === PAGE_SEGMENT) {
         const matchedPagePath = `${appDirPrefix}${segmentPath}${
-          parallelKey === 'children' ? '' : `/@${parallelKey}`
+          parallelKey === 'children' ? '' : `/${parallelKey}`
         }/page`
 
         const resolvedPagePath = await resolver(matchedPagePath)
         if (resolvedPagePath) pages.push(resolvedPagePath)
 
         // Use '' for segment as it's the page. There can't be a segment called '' so this is the safest way to add it.
-        props[parallelKey] = `['__PAGE__', {}, {
+        props[normalizeParallelKey(parallelKey)] = `['__PAGE__', {}, {
           page: [() => import(/* webpackMode: "eager" */ ${JSON.stringify(
             resolvedPagePath
           )}), ${JSON.stringify(resolvedPagePath)}],
@@ -228,15 +231,15 @@ async function createTreeCodeFromPath(
       const { treeCode: subtreeCode } = await createSubtreePropsFromSegmentPath(
         [
           ...segments,
-          ...(parallelKey === 'children' ? [] : [`@${parallelKey}`]),
+          ...(parallelKey === 'children' ? [] : [parallelKey]),
           Array.isArray(parallelSegment) ? parallelSegment[0] : parallelSegment,
         ]
       )
 
       const parallelSegmentPath =
         segmentPath +
         '/' +
-        (parallelKey === 'children' ? '' : `@${parallelKey}/`) +
+        (parallelKey === 'children' ? '' : `${parallelKey}/`) +
         (Array.isArray(parallelSegment) ? parallelSegment[0] : parallelSegment)
 
       // `page` is not included here as it's added above.
@@ -273,7 +276,7 @@ async function createTreeCodeFromPath(
         }
       }
 
-      props[parallelKey] = `[
+      props[normalizeParallelKey(parallelKey)] = `[
         '${
           Array.isArray(parallelSegment) ? parallelSegment[0] : parallelSegment
         }',
@@ -296,18 +299,16 @@ async function createTreeCodeFromPath(
     )
 
     for (const adjacentParallelSegment of adjacentParallelSegments) {
-      if (!props[adjacentParallelSegment]) {
+      if (!props[normalizeParallelKey(adjacentParallelSegment)]) {
         const actualSegment =
-          adjacentParallelSegment === 'children'
-            ? ''
-            : `@${adjacentParallelSegment}`
+          adjacentParallelSegment === 'children' ? '' : adjacentParallelSegment
         const defaultPath =
           (await resolver(
             `${appDirPrefix}${segmentPath}/${actualSegment}/default`
           )) ??
           (await resolver(`next/dist/client/components/parallel-route-default`))
 
-        props[adjacentParallelSegment] = `[
+        props[normalizeParallelKey(adjacentParallelSegment)] = `[
           '__DEFAULT__',
           {},
           {
@@ -395,12 +396,12 @@ const nextAppLoader: AppLoader = async function nextAppLoader() {
 
         const isParallelRoute = rest[0].startsWith('@')
         if (isParallelRoute && rest.length === 2 && rest[1] === 'page') {
-          matched[rest[0].slice(1)] = PAGE_SEGMENT
+          matched[rest[0]] = PAGE_SEGMENT
           continue
         }
 
         if (isParallelRoute) {
-          matched[rest[0].slice(1)] = rest.slice(1)
+          matched[rest[0]] = rest.slice(1)
           continue
         }