Am i following App Router Conventions

Unanswered

BakaPresident posted this in #help-forum

2024-09-13T04:01:06.889Z

Hi there, I'm currently using Next.JS App Router. For ease of access i'll show my page

page.tsx

export const dynamic = 'force-dynamic'

import { getAllBookings } from "@/lib/services/bookingService";
import OrdersTable from "./components/OrdersTable";

export default async function BookingPage() {
    const results = await getAllBookings();
    if (!results.success || !results.bookings) {
        throw new Error(results.error);
    }

    return <OrdersTable bookings={results.bookings} />;
}

Loading.tsx

import SkeletonOrderTable from "./components/SkeletonOrderTable";

export default function Loading() {
    return <SkeletonOrderTable />;
}

Error.tsx

"use client"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { TriangleAlertIcon } from "lucide-react";

export default function Error({ error }: { error: Error }) {
    return (
        <Alert variant="destructive">
            <TriangleAlertIcon className="h-4 w-4" />
            <AlertTitle>Error</AlertTitle>
            <AlertDescription>{error.message}</AlertDescription>
        </Alert>
    );
}

4 Replies

BakaPresidentOP

2024-09-13T04:01:32.090Z

My middleware.tsx looks something like

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
    const session = request.cookies.get('appwrite-session');
    const { pathname } = request.nextUrl;

    // Protect /dashboard and all its child routes
    if (pathname.startsWith('/dashboard')) {
        if (!session) {
            // Redirect to login if there's no session
            return NextResponse.redirect(new URL('/login', request.url));
        }
    }

    // Optional: Redirect authenticated users away from login page
    if (session && pathname === '/login') {
        return NextResponse.redirect(new URL('/dashboard', request.url));
    }

    return NextResponse.next();
}

export const config = {
    matcher: [
        /*
         * Match all request paths except for the ones starting with:
         * - api (API routes)
         * - _next/static (static files)
         * - _next/image (image optimization files)
         * - favicon.ico (favicon file)
         */
        '/((?!api|_next/static|_next/image|favicon.ico).*)',
    ],
};

OrdersTable.tsx (I'm sorry it's too big)
https://pastebin.com/xy8Y0jhq

But i guess the problem i'm having is that is doing export const dynamic = 'force-dynamic' the wrong choice. Am I fighting against the framework? If i don't use it, i have issues doing npm run build

I'm really sorry for the lengthy text but i have so much confusion on what i'm doing...

Thanks in advance