Next.js Discord

Discord Forum

Next.js best practice

Unanswered
Akbash posted this in #help-forum
Open in Discord
AkbashOP
Hi everyone! I'm working on a web-based IDE project using Next.js 15+ and I'm looking for some guidance on best practices when it comes to component types and routing.
I have two specific questions:

- Is using "use client" here appropriate?
Since our app is a highly interactive IDE/editor, almost all components are currently marked as client components. This layout uses useParams() and handles navigation-related logic. Would it make more sense to convert parts of this into server components, or is this a valid use case for a client component?

- Is using next/link preferable to a pure SPA approach?
Right now, I'm using Next.js's Link component for settings pages navigation. I personally prefer this approach for better integration with routing and SSR. However, a friend suggested that going full SPA (a tabs for examples) might be faster and simpler for an IDE-style app. Is there a clear trade-off here for this kind of application?

Thanks in advance for your input!

6 Replies

AkbashOP
"use client";

import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { useParams } from "next/navigation";
import { NavLink } from "@/components/nav-link";
import { Button } from "@/components/ui/button";

const SettingsLayout: React.FC<{
  children: React.ReactNode;
}> = ({ children }) => {

  const { projectUuid } = useParams<{ projectUuid: string }>();

  return (
    <div className="h-screen overflow-y-auto">
      <div className="container mx-auto max-w-6xl px-3 py-6">
        <div className="mb-6 flex items-center">
          <Link href="/">
            <Button variant="ghost" size="icon" className="mr-2">
              <ArrowLeft className="size-4" />
            </Button>
          </Link>
          <h1 className="text-2xl font-bold">Settings</h1>
        </div>

        <div className="grid grid-cols-4 gap-6">
          <aside className="hidden md:col-span-1 md:block">
            <nav className="space-y-1">
              <NavLink
                label="General"
                baseUrl={`/projects/${projectUuid}/settings`}
              />
              <NavLink
                label="Collaborators"
                baseUrl={`/projects/${projectUuid}/settings`}
              />
              <NavLink
                label="Dependencies"
                baseUrl={`/projects/${projectUuid}/settings`}
              />
            </nav>
          </aside>

          <main className="col-span-4 space-y-6 md:col-span-3">{children}</main>
        </div>
      </div>
    </div>
  );
};

export default SettingsLayout
American black bear
this should probably be a server component and you should get params using the param prop available in layout.tsx
export function SettingsLayout({params, children}: {params: ParamType, children: React.ReactNode}) {
  return (
    // create links using params.projectUuid, if you are using next.js 15 this will be an async component awaiting params
  )
}
@American black bear this should probably be a server component and you should get params using the param prop available in `layout.tsx`
AkbashOP
yeah, thank you. What about the second question? I prefer to use Link component provided by Next
American black bear
yes always use next/link for internal links as they don't refresh the entire page. For external links, mailto, tel, etc. use <a>