• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
    • Adding API Routes
    • Change Authentication strategy
    • Fetching the signed in User
    • Reading a Document
    • Creating a Document
    • Configuring Plans
    • Project Configuration
    • Updating the Navigation menu
    • Adding a new translation string
    • Guarding an API Route
    • Adding Pages
    • Updating the Sidebar menu
    • Require Email Verification
    • Fetching the selected Organization
    • Reading a list of Documents
    • Updating a Document
    • Running the Stripe Webhook locally
    • Branding
    • Setting a Default Language
    • Dark Theme
    • Theming
    • Calling API Routes from the client
    • Deleting a Document
    • Updating the Logo
    • Adding a new language in the Next.js Firebase SaaS Kit
    • Checking CSRF Tokens
    • Passing data from server to client
    • Updating the Fonts
    • Adding Pages
    • Guarding Pages
    • Using Lemon Squeezy instead of Stripe
    • Updating the Favicons
    • Using the Language Switcher
    • Environment variables
    • Detect current Locale
    • Setting up Emails

Adding pages to the application of your Makerkit Next.js Firebase project

Learn how to add new pages to the application of your Makerkit Next.js Firebase project.

To add a new page to the application site of your Next.js project, you can create a new page in the pages directory and using the required getServerSideProps function.

By "application", we mean the private pages of your project behind the authentication wall, such as the dashboard, the settings page, etc.

As such - we need to make sure to protect these pages from being accessed by unauthorized users. To do so, we can use the withAppProps function, which will redirect the user to the login page if they are not authenticated.

Adding a new page to the app

For example, if you want to add a page at /tasks, you can create a new file at pages/about.tsx with the following content:

tsx
import { GetServerSidePropsContext } from 'next';
import { withAppProps } from '~/lib/props/with-app-props';
import RouteShell from '~/components/RouteShell';
const Tasks = () => {
return (
<RouteShell title={'Tasks'}>
Tasks...
</RouteShell>
);
};
export default Tasks;
export async function getServerSideProps(ctx: GetServerSidePropsContext) {
return await withAppProps(ctx);
}

<div>

Always use withAppProps

It is important to always use the <code>withAppProps</code> function in your <code>getServerSideProps</code> function, as it will make sure that the user is authenticated before accessing the page.

</div>


Let's break down what's happening here:

  1. withAppProps: This function will retrieve all the required data and send it to the page as props. It will also redirect the user to the login page if they are not authenticated.
  2. RouteShell: This component is a wrapper that will add the required layout to the page, including the navigation bar, the sidebar, the footer, etc. It will also initialize Firebase Firestore.