Next.js Discord

Discord Forum

How can I opt out of rendering a layout?

Unanswered
Red wasp posted this in #help-forum
Open in Discord
Red waspOP
I want to show an error page if a thread is not found, but the layout which contains the navbar and other components appears as well. How can I conditionally render the layout? I want this to work with server rendered pages.

Here is an example:
import PageNotFound from '@/components/page-not-found';
import { db } from '@/lib/db';
import { NextPage } from 'next';

interface ThreadIdPageProps {
  params: {
    threadId: string;
  };
}

const ThreadIdPage: NextPage<ThreadIdPageProps> = async ({ params }) => {
  const thread = await db.thread.findUnique({
    where: {
      id: params.threadId
    }
  });

  // make this render without layout
  if (!thread) return <PageNotFound message='Thread not found :/' />;

  return (
    <div className='grid grid-flow-row gap-2 w-[40%] mx-auto'>
      <div className='bg-neutral-200 dark:bg-neutral-900 sm:rounded-md p-2 overflow-auto'>
        <p>{thread?.title}</p>
      </div>
    </div>
  );
};

export default ThreadIdPage;

0 Replies