Renaming directory loaded from origin

Help
,
1

image

I wanna rename _next

reproduce: https://nextjs-template.vercel.app

2

Hi, and welcome to the Vercel Community @praskand!

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:

Let us know how you get on!

1 Like
3

Thanks @pawlean !, 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}

image
image1032×429 73.4 KB

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> }
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.