Renaming directory loaded from origin

Praskand · 2024-10-05 09:02:19.773661

![image|199x87](upload://glMtBltSH2y33wt8kz2YjcWNrdu.png) I wanna rename _next reproduce: https://nextjs-template.vercel.app github.com/vercel/vercel/tree/main/examples/nextjs

Hi, and welcome to the Vercel Community !

Yes, you can rename the _next folder in Next.js, but it's important to note that this folder is automatically generated during the build process and contains important assets for your application. The folder name "_next" is the default, but you can change it using the distDir configuration option in your next.config.js file.

See relevant docs:

https://nextjs.org/docs/app/api-reference/next-config-js/distDir

Let us know how you get on!

Thanks !, Here's another important:

Error: Could not find the module "/vercel/path0/node_modules/@primer/react/lib-esm/index.js#SplitPageLayout#Header" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

14:23:48.967 at eb (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:136574)

14:23:48.967 at ek (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:140197)

14:23:48.967 at Array.toJSON (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135626)

14:23:48.969 at stringify ()

14:23:48.970 at eP (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142090)

14:23:48.970 at eE (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142569)

14:23:48.970 at AsyncLocalStorage.run (node:async_hooks:346:14)

14:23:48.970 at Timeout._onTimeout (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:150268)

14:23:48.971 at listOnTimeout (node:internal/timers:581:17)

14:23:48.971 at process.processTimers (node:internal/timers:519:7) {

14:23:48.971 digest: '2848986059'

14:23:48.971}

page.tsx

import {SplitPageLayout } from '@primer/react'
import {Placeholder} from '../Placeholder'

export default function Home() {
  return <body>
      <SplitPageLayout>
        
      <SplitPageLayout.Header>
        <Placeholder label="Header" height={100} />
      </SplitPageLayout.Header>
      <SplitPageLayout.Pane position="start">
        <Placeholder label="Pane" height={400} />
      </SplitPageLayout.Pane>
      <SplitPageLayout.Content>
        <Placeholder label="Content" height={600} />
      </SplitPageLayout.Content>
      <SplitPageLayout.Footer>
        <Placeholder label="Footer" height={100} />
      </SplitPageLayout.Footer>
    </SplitPageLayout>
</body> }

Layout

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) { return <html lang="en">{children}</html> }