Ensure App Router and Pages Router modules can't share chunks (#50327)

## What?

Ensures the name of the chunk is not the same between two modules in different layers.
E.g. if you import 'button-library' in App Router and Pages Router we don't want these to be bundled in the same chunk as they're never used on the same page.

## How?

Added the layer to the chunk name hash generation in splitChunks. Ensures the two modules don't have the same chunk name generated, as discussed with @sokra.

Follow-up to #50324

packages/next/src/build/webpack-config.ts

@@ -1672,6 +1672,10 @@ export default async function getBaseWebpackConfig(
             framework: {
               chunks: 'all',
               name: 'framework',
+              // Ensures the framework chunk is not created for App Router.
+              layer(layer: any) {
+                return layer === null || layer === undefined
+              },
               test(module: any) {
                 const resource = module.nameForCondition?.()
                 return resource
@@ -1696,6 +1700,7 @@ export default async function getBaseWebpackConfig(
                 )
               },
               name(module: {
+                layer: string | null | undefined
                 type: string
                 libIdent?: Function
                 updateHash: (hash: crypto.Hash) => void
@@ -1712,6 +1717,13 @@ export default async function getBaseWebpackConfig(
                   hash.update(module.libIdent({ context: dir }))
                 }
 
+                // Ensures the name of the chunk is not the same between two modules in different layers
+                // E.g. if you import 'button-library' in App Router and Pages Router we don't want these to be bundled in the same chunk
+                // as they're never used on the same page.
+                if (module.layer) {
+                  hash.update(module.layer)
+                }
+
                 return hash.digest('hex').substring(0, 8)
               },
               priority: 30,