Skip to main content
Our application’s routing is powered by Next.js Pages router, which is a standard for handling routes in Next.js applications.

​
Page Configuration with <Page>

Each page component declares its own scope and layout by wrapping its content in the <Page> component (imported from components). This co-locates route configuration with the page component itself — no central configuration file to maintain.

​
Scope and Layout Types

Routes are categorized into two scope types and layout types:
  1. Scope Types:
  • PUBLIC: Routes accessible without user authentication.
  • PRIVATE: Routes requiring user authentication.
  1. Layout Types:
  • MAIN: Main layout for authenticated users.
  • UNAUTHORIZED: Layout for non-authenticated users or authentication pages.

​
Page Configuration Example

Here’s how a page declares its scope and layout:
  • Private Page (Requires authentication):
src/pages/profile/index.page.tsx
import { Page, ScopeType, LayoutType } from 'components';

const Profile = () => {
  return (
    <Page scope={ScopeType.PRIVATE} layout={LayoutType.MAIN}>
      <div>Profile page</div>
    </Page>
  );
};

export default Profile;
  • Public Page (Accessible without authentication):
src/pages/forgot-password/index.page.tsx
import { Page, ScopeType, LayoutType } from 'components';

const ForgotPassword = () => {
  return (
    <Page scope={ScopeType.PUBLIC} layout={LayoutType.UNAUTHORIZED}>
      <div>Forgot password page</div>
    </Page>
  );
};

export default ForgotPassword;

​
Page Component

The Page component (/pages/_app/PageConfig/index.tsx, re-exported from components) handles scope and layout rendering. Each page wraps its content in <Page scope={...} layout={...}> to declare its access requirements and layout.

​
How It Works

  • Each page imports the Page component and wraps its returned JSX with the appropriate scope and layout props.
  • Based on these props, the Page component applies the designated scope and layout.
  • For private routes, it redirects unauthenticated users to the sign-in page.
  • Conversely, for public routes, authenticated users are redirected to the home page.

​
Naming Conventions for Route Files

  • Page Routes: Each file representing a page route should have the .page.tsx postfix.
  • API Routes/Middleware: Files for Next.js API routes or middleware should have the .api.ts postfix.
These conventions can be modified in next.config.js if needed.
By following this structure, our application maintains a clear, manageable, and scalable routing system.