Sets component name to the PascalCase version of the file name by default.
menu-wrapper.tsx
interfaceMenuWrapperProps{children: React.ReactNode;}exportdefaultfunctionMenuWrapper({ children }: Readonly<MenuWrapperProps>){return<span>{children}</span>;}
acompc (Asynchronous React Component With Children)
Sets component name to the PascalCase version of the file name by default.
form-container.tsx
interfaceFormContainerProps{children: React.ReactNode;}exportdefaultasyncfunctionFormContainer({ children }: Readonly<FormContainerProps>){return<span>{children}</span>;}
rlayout (Next.js Root Layout)
Basic Next.js Root Layout setup.
app/layout.tsx
importtype{Metadata}from"next";exportconstmetadata: Metadata={title: "Title",description: "Description",};exportdefaultfunctionRootLayout({ children }: Readonly<{children: React.ReactNode}>){return(<htmllang="en"><body>{children}</body></html>);}
arlayout (Asynchronous Next.js Root Layout)
Basic Next.js Root Layout setup but this time with the async keyword. Use in case you want to fetch server-side data.
app/layout.tsx
importtype{Metadata}from"next";exportconstmetadata: Metadata={title: "Title",description: "Description",};exportdefaultasyncfunctionRootLayout({ children }: Readonly<{children: React.ReactNode}>){return(<htmllang="en"><body>{children}</body></html>);}
layout (Next.js Layout)
Sets layout name to the PascalCase version of the parent folder name + Layout by default.
dashboard/layout.tsx
exportdefaultfunctionDashboardLayout({ children }: Readonly<{children: React.ReactNode}>){return<div>{children}</div>;}
alayout (Asynchronous Next.js Layout)
Sets layout name to the PascalCase version of the parent folder name + Layout by default. This time with the async keyword. Use in case you want to fetch server-side data.
devices/layout.tsx
exportdefaultasyncfunctionDevicesLayout({ children }: Readonly<{children: React.ReactNode}>){return<div>{children}</div>;}
page (Next.js Page)
Sets page name to the PascalCase version of the parent folder name + Page by default.
Sets page name to the PascalCase version of the parent folder name + Page by default. This time with the async keyword. Use in case you want to fetch server-side data.
Sets component name to the PascalCase version of the file name by default.
menu-wrapper.tsx
exportdefaultfunctionMenuWrapper({ children }){return<span>{children}</span>;}
acompc (Asynchronous React Component With Children)
Sets component name to the PascalCase version of the file name by default.
form-container.jsx
exportdefaultasyncfunctionFormContainer({ children }){return<span>{children}</span>;}
rlayout (Next.js Root Layout)
Basic Next.js Root Layout setup.
app/layout.jsx
exportconstmetadata={title: "Title",description: "Description",};exportdefaultfunctionRootLayout({ children }){return(<htmllang="en"><body>{children}</body></html>);}
arlayout (Asynchronous Next.js Root Layout)
Basic Next.js Root Layout setup but this time with the async keyword. Use in case you want to fetch server-side data.
app/layout.jsx
exportconstmetadata={title: "Title",description: "Description",};exportdefaultasyncfunctionRootLayout({ children }){return(<htmllang="en"><body>{children}</body></html>);}
layout (Next.js Layout)
Sets layout name to the PascalCase version of the parent folder name + Layout by default.
dashboard/layout.jsx
exportdefaultfunctionDashboardLayout({ children }){return<div>{children}</div>;}
alayout (Asynchronous Next.js Layout)
Sets layout name to the PascalCase version of the parent folder name + Layout by default. This time with the async keyword. Use in case you want to fetch server-side data.
devices/layout.jsx
exportdefaultasyncfunctionDevicesLayout({ children }){return<div>{children}</div>;}
page (Next.js Page)
Sets page name to the PascalCase version of the parent folder name + Page by default.
Sets page name to the PascalCase version of the parent folder name + Page by default. This time with the async keyword. Use in case you want to fetch server-side data.