ref: header separating shop and main header and removing footer#59
Conversation
liudmylasovetovs
requested review from
AM1007 and
ViktorSvertoka
as code owners
✅ Deploy Preview for develop-devlovers ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughThe PR introduces scope-based header rendering by adding middleware logic to determine application scope ("shop" or "site") from the request pathname, setting an x-app-scope header, and using this header in the root layout to conditionally render ShopHeader or the default header. The shop layout is simplified to remove redundant header and footer components. Changes
Sequence DiagramsequenceDiagram
participant Client
participant Middleware
participant RootLayout
participant ShopHeader
participant DefaultHeader
Client->>Middleware: HTTP Request
Middleware->>Middleware: getScopeFromPathname()
Note over Middleware: Extract scope ("shop" or "site")
Middleware->>Middleware: Run authMiddleware
Middleware->>Middleware: Set x-app-scope header
Middleware-->>Client: NextResponse with x-app-scope
Client->>RootLayout: Request
RootLayout->>RootLayout: Read x-app-scope header
alt scope === "shop"
RootLayout->>ShopHeader: Render ShopHeader
ShopHeader-->>RootLayout: ShopHeader component
else scope === "site"
RootLayout->>DefaultHeader: Render DefaultHeader
DefaultHeader->>DefaultHeader: Show nav links, auth, language switcher
DefaultHeader-->>RootLayout: DefaultHeader component
end
RootLayout-->>Client: Rendered page
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
frontend/app/[locale]/shop/layout.tsx (1)
14-16: Consider removing empty lines for cleaner formatting.The empty lines at 14 and 16 appear to be artifacts from removing the header and footer components. Consider removing them for cleaner code formatting.
🔎 Apply this diff to clean up the empty lines:
<CartProvider> <div className="flex min-h-screen flex-col"> - <main className="flex-1">{children}</main> - </div> </CartProvider>frontend/middleware.ts (1)
63-67: Setting x-app-scope on redirect responses is unnecessary.When the intl middleware returns a redirect (with a
locationheader), settingx-app-scopeon that response (line 65) has no effect because redirect responses don't carry custom headers to the subsequent request. The middleware will execute again on the redirected request and recalculate the scope anyway.While harmless, you can simplify the code by removing this header assignment for redirects and only setting it for rewrites.
🔎 Optional: Remove unnecessary header assignment on redirects
- const isRewriteOrRedirect = intlResponse.headers.has("location") || intlResponse.headers.has("x-middleware-rewrite") - if (isRewriteOrRedirect) { + const isRewrite = intlResponse.headers.has("x-middleware-rewrite") + if (isRewrite) { intlResponse.headers.set("x-app-scope", scope) return intlResponse } + + // For redirects, just return the response - middleware will run again + if (intlResponse.headers.has("location")) { + return intlResponse + }
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
frontend/app/[locale]/layout.tsx(3 hunks)frontend/app/[locale]/shop/layout.tsx(1 hunks)frontend/middleware.ts(1 hunks)
🔇 Additional comments (4)
frontend/app/[locale]/layout.tsx (2)
12-13: LGTM! Correct async headers() usage for Next.js 15+.The import and usage of
await headers()correctly follows Next.js 15+ conventions where request APIs are asynchronous. The fallback to 'site' provides a safe default scope, and the showAdminNavLink flag is properly derived from the environment variable.Also applies to: 32-33
43-113: LGTM! Clean scope-based header rendering.The conditional rendering logic correctly delegates to ShopHeader for shop routes while preserving the existing navigation and authentication controls for site routes. The structure is clear and aligns with the PR objectives of route-aware header switching.
frontend/middleware.ts (2)
46-49: LGTM! Solid scope detection logic.The
getScopeFromPathnamefunction correctly strips the locale prefix using a positive lookahead to ensure only the locale at the start is matched. The return type is properly constrained to the union type, and the shop detection logic is straightforward.
59-60: LGTM! Correct header propagation for Next.js middleware.The implementation correctly creates a new Headers object with
x-app-scopeand passes it toNextResponse.next(), making the scope header available to downstream server components that read it viaheaders().Also applies to: 69-71
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| intlResponse.headers.set("x-app-scope", scope) | ||
| return intlResponse | ||
| } | ||
|
|
||
| return intlResponse; | ||
| return NextResponse.next({ |
There was a problem hiding this comment.
When the request isn’t rewritten you’re now returning NextResponse.next instead of the intlResponse from createIntlMiddleware, so locale headers (e.g., x-next-intl-locale) generated by next-intl never reach the app. Because i18n/request.ts falls back to the default language when requestLocale is missing, localized URLs like /en/... or /pl/... will render default-language messages unless the request happens to hit the rewrite/redirect branch.
Useful? React with 👍 / 👎.
ref: header separating shop and main header and removing footer
2 participants
Description
This PR implements route-aware header switching for the shop section without restructuring the main platform routes.
The solution introduces a server-side scope detection via middleware and conditionally renders the appropriate header in the locale layout:
/[locale]/shop/**) render the dedicated Shop header with product categories and shop navigation.This approach avoids moving or refactoring non-shop routes owned by other team members and follows production-safe Next.js App Router patterns.
Related Issue
Issue: #<issue_number>
Changes
shop | site) inmiddleware.tsbased on pathname.x-app-scope) for server components.app/[locale]/layout.tsxto conditionally render ShopHeader or DefaultHeader on the server.@header) slot files after deprecating that approach.app/[locale]/shop/layout.tsxfocused only on shop-specific providers (theme, cart).Database Changes (if applicable)
How Has This Been Tested?
Manual verification:
/en,/pl,/uk→ platform header/en/shop,/pl/shop,/uk/shop→ shop header with categoriesScreenshots (if applicable)
Checklist
Before submitting
Reviewers
Summary by CodeRabbit
New Features
Refactor
✏️ Tip: You can customize this high-level summary in your review settings.