Create a New Page

This guide walks you through the steps to create a new page in the template. By leveraging Next.js file-system routing and the extended routing configuration, you can easily add new pages with tailored settings.

Create the Page Component

1. Navigate to the app directory

• In the src/app folder, decide where your new page should go. For example, if the page requires layouts, place it in the src/app/(layout) directory. If it doesn't require layouts, use the src/app/(non-layout) directory instead.

2. Create a New File

• For a static route, create src/app/product/page.tsx
• For a dynamic route, use brackets to define parameters, e.g.,src/app/product/[id]/page.tsx

3. Add Your Page Code

Define the React component for your page. Example:

const Page = () => {
  return (
     

         
Welcome to the New Page
         
This is a custom page.
     
  );
};
                    
export default Page;

Additional Notes

Instead of applying 'use client' directly to the page file, it is recommended to create a separate client component and import it into the page. This approach allows the page itself to remain server-rendered, optimizing server-side rendering (SSR) and letting only the client-side logic be handled in the client component. For example:

// src/app/(layout)/new-page/page.tsx
import ClientComponent from './ClientComponent';

const NewPage = () => {
  return (
      

         
New Page
          <ClientComponent />
      
  );
};

export default NewPage;

// src/app/(layout)/new-page/_components/ClientComponent.tsx
'use client';

const ClientComponent = () => {
  return 
This component runs on the client.
;
};

export default ClientComponent;