Plugin Pages

Creating a new page in VitNode is the same as creating a new page in Next.js. The only difference is that you need to create a page inside a plugin folder.

Pre-build Layouts

Inside apps/frontend/src/app directory, you can find pre-build layouts created by VitNode:

Path	Body HTML	i18n	Layout
`app/[locale]/(main)`	✅	✅	✅
`app/[locale]/admin`	✅	✅	❌
`app/[locale]/`	✅	✅	❌
`app/`	❌	❌	❌

According to the pre-build layouts, you need to create a folder with {plugin_code} inside one of pre-build layouts. For example, if you want to create a new page inside the (main) layout, you need to create a folder inside app/[locale]/(main)/{plugin_code} directory.

Plugin folder

It is very important to create a folder with the same name as the plugin code. Otherwise, the page will not be exported while exporting the plugin.

Of course fell free to create new pages with different names, but it is recommended to use the plugin code as the folder name.

Create a page.tsx file

Inside the {plugin_code} folder, create a page.tsx file. This file will be the main file for the new page.

apps/frontend/src/app/[locale]/(main)/{plugin_code}/page.tsx

export default function Page() {
  return <div>Hello World</div>;
}

Follow the Next.js documentation to find more about creating pages & layouts.

Pre-build Layouts

Create a New Page

Create a folder

Create a page.tsx file

On this page