fix: duplicate Navbar in dev (Turbopack)

[fityannugroho]

Summary

This PR scopes the app's Not Found page to the (main) route group to avoid rendering two Navbar components during development with Turbopack.

What changed

• Added app/(main)/not-found.tsx — a group-scoped Not Found page that does not render the Navbar.
• Removed app/not-found.tsx — the previous global Not Found which rendered Navbar and caused duplication when a route under (main) returned a not-found.

Why

• Next App Router composes layouts in a tree (root → group (main) → page). When a route under (main) returns Not Found, the layout tree still includes app/(main)/layout.tsx (which renders Navbar). The global app/not-found.tsx also rendered Navbar, resulting in two navbars being mounted.
• This was especially visible during development with Turbopack because Turbopack's more granular HMR and streaming rendering can expose transient or state-preserving mounts that Webpack's dev server often hid. The actual production behavior was unaffected, but the dev UX was confusing.

Verification

• Reproduced locally with next dev --turbo before the change: navigating to a missing route under (main) showed two Navbar instances.
• After the change, the duplicate Navbar no longer appears for not-found routes under the (main) group.

Files changed

• A app/(main)/not-found.tsx — new group-scoped Not Found page
• D app/not-found.tsx — removed global Not Found that included Navbar

Notes & follow-ups

• Alternatives considered:

  • Move Navbar to app/layout.tsx (root) if you want the navbar on every route globally.
  • Keep a global app/not-found.tsx but ensure it doesn't render Navbar (same effect).
  • Create per-group not-found pages for different visual treatments per area.

• This change is low-risk and only affects the Not Found fallback behavior in dev; production rendering remains consistent.