diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts
index 3adfc98268df..c93a660e4dd9 100644
--- a/packages/next/build/entries.ts
+++ b/packages/next/build/entries.ts
@@ -245,6 +245,7 @@ interface CreateEntrypointsParams {
   target: 'server' | 'serverless' | 'experimental-serverless-trace'
   viewsDir?: string
   viewPaths?: Record<string, string>
+  pageExtensions: string[]
 }
 
 export function getEdgeServerEntry(opts: {
@@ -285,13 +286,12 @@ export function getEdgeServerEntry(opts: {
   return `next-middleware-ssr-loader?${stringify(loaderParams)}!`
 }
 
-export function getViewsEntry(opts: { pagePath: string; viewsDir: string }) {
-  const loaderParams = {
-    pagePath: opts.pagePath,
-    viewsDir: opts.viewsDir,
-  }
-
-  return `next-view-loader?${stringify(loaderParams)}!`
+export function getViewsEntry(opts: {
+  pagePath: string
+  viewsDir: string
+  pageExtensions: string[]
+}) {
+  return `next-view-loader?${stringify(opts)}!`
 }
 
 export function getServerlessEntry(opts: {
@@ -358,7 +358,16 @@ export function getClientEntry(opts: {
 }
 
 export async function createEntrypoints(params: CreateEntrypointsParams) {
-  const { config, pages, pagesDir, isDev, target, viewsDir, viewPaths } = params
+  const {
+    config,
+    pages,
+    pagesDir,
+    isDev,
+    target,
+    viewsDir,
+    viewPaths,
+    pageExtensions,
+  } = params
   const edgeServer: webpack5.EntryObject = {}
   const server: webpack5.EntryObject = {}
   const client: webpack5.EntryObject = {}
@@ -401,6 +410,7 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
             server[serverBundlePath] = getViewsEntry({
               pagePath: mappings[page],
               viewsDir,
+              pageExtensions,
             })
           } else if (isTargetLikeServerless(target)) {
             if (page !== '/_app' && page !== '/_document') {
diff --git a/packages/next/build/index.ts b/packages/next/build/index.ts
index 5884545a12ed..187ac67d8218 100644
--- a/packages/next/build/index.ts
+++ b/packages/next/build/index.ts
@@ -376,6 +376,7 @@ export default async function build(
             target,
             viewsDir,
             viewPaths: mappedViewPaths,
+            pageExtensions: config.pageExtensions,
           })
         )
 
diff --git a/packages/next/build/webpack/loaders/next-view-loader.ts b/packages/next/build/webpack/loaders/next-view-loader.ts
index 6085337c49b9..1f4ca331584f 100644
--- a/packages/next/build/webpack/loaders/next-view-loader.ts
+++ b/packages/next/build/webpack/loaders/next-view-loader.ts
@@ -37,26 +37,22 @@ async function resolveLayoutPathsByPage({
   return layoutPaths
 }
 
-const extensions = [
-  ...NODE_RESOLVE_OPTIONS.extensions,
-  ...NODE_RESOLVE_OPTIONS.extensions.map((ext) => `.server${ext}`),
-  ...NODE_RESOLVE_OPTIONS.extensions.map((ext) => `.client${ext}`),
-]
-const resolveOptions: any = {
-  ...NODE_RESOLVE_OPTIONS,
-  extensions,
-}
-
 const nextViewLoader: webpack.LoaderDefinitionFunction<{
   pagePath: string
   viewsDir: string
+  pageExtensions: string[]
 }> = async function nextViewLoader() {
-  const loaderOptions = this.getOptions() || {}
+  const { viewsDir, pagePath, pageExtensions } = this.getOptions() || {}
+
+  const extensions = pageExtensions.map((extension) => `.${extension}`)
+  const resolveOptions: any = {
+    ...NODE_RESOLVE_OPTIONS,
+    extensions,
+  }
   const resolve = this.getResolve(resolveOptions)
-  const viewsDir = loaderOptions.viewsDir
 
   const layoutPaths = await resolveLayoutPathsByPage({
-    pagePath: loaderOptions.pagePath,
+    pagePath: pagePath,
     resolve: async (pathname) => {
       try {
         return await resolve(this.rootContext, pathname)
@@ -87,11 +83,11 @@ const nextViewLoader: webpack.LoaderDefinitionFunction<{
 
   // Add page itself to the list of components
   componentsCode.push(
-    `'${pathToUrlPath(loaderOptions.pagePath).replace(
+    `'${pathToUrlPath(pagePath).replace(
       new RegExp(`/page\\.+(${extensions.join('|')})$`),
       ''
       // use require so that we can bust the require cache
-    )}': () => require('${loaderOptions.pagePath}')`
+    )}': () => require('${pagePath}')`
   )
 
   const result = `
diff --git a/packages/next/server/dev/hot-reloader.ts b/packages/next/server/dev/hot-reloader.ts
index 2fa7844e8f09..8d8e7651f76a 100644
--- a/packages/next/server/dev/hot-reloader.ts
+++ b/packages/next/server/dev/hot-reloader.ts
@@ -421,6 +421,7 @@ export default class HotReloader {
             pagesDir: this.pagesDir,
             previewMode: this.previewProps,
             target: 'server',
+            pageExtensions: this.config.pageExtensions,
           })
         )
 
@@ -488,6 +489,7 @@ export default class HotReloader {
           pagesDir: this.pagesDir,
           previewMode: this.previewProps,
           target: 'server',
+          pageExtensions: this.config.pageExtensions,
         })
       ).client,
       hasReactRoot: this.hasReactRoot,
@@ -605,6 +607,7 @@ export default class HotReloader {
                               relative(this.viewsDir!, absolutePagePath)
                             ),
                             viewsDir: this.viewsDir!,
+                            pageExtensions: this.config.pageExtensions,
                           })
                         : request,
                   })