{plannedCards.length ? (
plannedCards.map((card) => (
Empty
)}
);
}
```
--------------------------------
### Fetch Blog Post Data in Next.js Server Component
Source: https://github.com/roubzzz/usenextbase-documentation/blob/main/docs-v3/guides/asynchronous-data-fetching.md
This Next.js page component (`src/app/(external-pages)/blog/[slug]/page.tsx`) demonstrates asynchronous data fetching within a server component. It uses `generateStaticParams` for static site generation, `generateMetadata` for SEO, and the default export function to fetch and render a blog post based on its slug. Data is fetched using `anonGetPublishedBlogPostBySlug`, which is a server action.
```TypeScript
import {
anonGetPublishedBlogPostBySlug,
anonGetPublishedBlogPosts,
} from '@/data/anon/internalBlog';
import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { z } from 'zod';
const paramsSchema = z.object({
slug: z.string(),
});
// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
const posts = await anonGetPublishedBlogPosts();
return posts.map((post) => ({
slug: post.slug,
}));
}
export async function generateMetadata({
params,
}: {
params: unknown;
}): Promise
{post.cover_image ? (
) : null}
);
} catch (error) {
return notFound();
}
}
```
--------------------------------
### Update Next.js Middleware for Route Protection
Source: https://github.com/roubzzz/usenextbase-documentation/blob/main/docs-v3/guides/creating-protected-page.md
This snippet demonstrates how to manually add a new route to the `protectedPaths` array in `middleware.ts`. It includes an example of custom middleware logic for a specific route, showing how to check for a user session using Supabase and redirect if not authenticated, ensuring a fast, preliminary check for route protection.
```TypeScript
// In middleware.ts
const protectedPaths = [
// ... existing protected paths ...
`/my-protected-page(/.*)?`,
];
const middlewares = [
{
matcher: protectedPaths.map((path) =>
urlJoin('/', `(${LOCALE_GLOB_PATTERN})`, path),
),
middleware: async (req) => {
// Existing middleware logic
},
},
// If you need custom logic for this specific route, you can add it here:
{
matcher: ['/my-protected-page'],
middleware: async (req) => {
// Custom logic for /my-protected-page if needed
// For example, checking for specific user roles
const supabase = createSupabaseMiddlewareClient(req);
const {
data: { session },
} = await supabase.auth.getSession();
if (!session) {
return NextResponse.redirect(new URL('/login', req.url));
}
// Additional checks can be performed here
return NextResponse.next();
},
},
];
```
--------------------------------
### Next.js Page for Organization Billing Details
Source: https://github.com/roubzzz/usenextbase-documentation/blob/main/docs-v3/guides/stripe-subscriptions.md
This Next.js `async` page component, `OrganizationSettingsPage`, is responsible for rendering the organization's billing and subscription details. It uses Zod for parameter validation to extract the `organizationId`, then fetches the user's role and normalized subscription data. The `Subscription` sub-component displays these details, wrapped in a `Suspense` boundary for loading states.
```TypeScript
import { z } from 'zod';
import { OrganizationSubscripionDetails } from './OrganizationSubscripionDetails';
import {
getLoggedInUserOrganizationRole,
getNormalizedOrganizationSubscription,
} from '@/data/user/organizations';
import { Suspense } from 'react';
import { T } from '@/components/ui/Typography';
const paramsSchema = z.object({
organizationId: z.string(),
});
async function Subscription({ organizationId }: { organizationId: string }) {
const normalizedSubscription =
await getNormalizedOrganizationSubscription(organizationId);
const organizationRole =
await getLoggedInUserOrganizationRole(organizationId);
return (