WebAppPage
Easily render the pages of your Micro SaaS web app.
When a user logs into your product, they access to your web app.
By default, Shipped redirects the users to the /dashboard
page.
The dashboard page is an example of web app page with the sidebar (that's responsive and hides on mobile).
If you want to reuse this template for all the pages of your web app, it's strongly recommended to re-use the <WebAppPage />
component.
The <WebAppPage />
component is a template component that includes:
the sidebar
the content to be replaced with your React components, according to the current route
How to add a new web app route
Let's say you want to add a settings page, to let the users set their preferences.
The route you want is /settings
, to get it you need to:
Create the route
settings
intoRoutes
atsrc/data/routes.ts
Create the file
src/app/settings/page.tsx
Paste this content (notice
currentPage
set toRoutes.settings
):
Update the component
<WebAppPage />
, scroll down where the routes are handled and add your custom content
For instance add this code (notice that UserSettings is not provided by Shipped, it is used as an example here):
Last updated