feat: Next.js 14+ App Router Migration + Image Optimization

[devin-ai-integration]

Summary

Upgrades the e-commerce app from Next.js 12 (Pages Router) to Next.js 14 (App Router) and replaces all <img> tags with next/image <Image> components.

Framework upgrades:

• next 12.1.0 → 14, react 17.0.2 → 18, react-dom 17.0.2 → 18, eslint-config-next 12 → 14
• Removed .babelrc and babel devDependencies (Next.js 14 uses SWC)

Pages Router → App Router migration:

• pages/_app.js → app/layout.js (metadata API) + app/providers.js ('use client' wrapper for StateContext/Toaster)
• pages/index.js → app/page.js — async Server Component with revalidate = 60 (ISR, previously SSR via getServerSideProps)
• pages/product/[slug].js → app/product/[slug]/page.js + ProductDetailClient.js — Server Component for data fetching with generateStaticParams, interactive UI extracted to a 'use client' component
• pages/success.js → app/success/page.js with 'use client'
• pages/api/stripe.js → app/api/stripe/route.js using NextResponse
• Added loading.js skeletons for home and product detail routes
• Added 'use client' to Navbar.jsx and Cart.jsx
• Removed console.log(product) from product detail page
• Deleted entire pages/ directory

Image optimization:

• All <img> tags replaced with <Image> from next/image using explicit .url() on Sanity urlFor()
• next.config.js configured with remotePatterns for cdn.sanity.io

Security fixes (from review):

• Stripe secret key env var renamed from NEXT_PUBLIC_STRIPE_SECRET_KEY → STRIPE_SECRET_KEY to prevent client-side exposure
• Product detail GROQ query changed from string interpolation to parameterized query ($slug param) to prevent injection

Build (npm run build) and lint (npm run lint) pass successfully.

Review & Testing Checklist for Human

• Rename Stripe env var in deployment — The Stripe secret key env var was renamed from NEXT_PUBLIC_STRIPE_SECRET_KEY to STRIPE_SECRET_KEY. Update your .env / hosting environment accordingly, or the Stripe checkout will fail.
• Verify image rendering end-to-end — Every urlFor(...).url() call needs a valid Sanity image source. If image is undefined/falsy (e.g., urlFor(image && image[0]).url() where image is empty), .url() will throw instead of silently producing a bad src. Run the app and check all image-heavy views (home, product detail, cart).
• Confirm ISR vs. SSR tradeoff is acceptable — Home page changed from getServerSideProps (fresh on every request) to revalidate = 60 (stale for up to 60s). Verify this is acceptable for content freshness requirements.
• Test Stripe checkout flow — The API route handler now uses request.headers.get('origin') instead of req.headers.origin, and error responses changed shape (now { message: ... } instead of raw string). Verify the full checkout → success redirect works.
• Check Layout.jsx is now dead code — The root layout (app/layout.js) directly renders Navbar/Footer. components/Layout.jsx still exists and is exported from components/index.js but is no longer imported anywhere. Consider removing it if it's truly unused.

Recommended test plan: Run npm run dev, navigate the home page, click a product, add to cart, and attempt checkout. Verify all images load via next/image (check network tab for /_next/image URLs).

Notes

• pages/api/hello.js (default Next.js scaffold route) was also removed as part of deleting pages/.
• --legacy-peer-deps was needed during install because next-sanity-image@3.2.1 has a peer dependency on next@^11 || ^12.
• The useEffect missing dependencies warning in app/success/page.js is pre-existing from the original code and was intentionally left unchanged per instructions not to change state management approach.

Link to Devin session: https://app.devin.ai/sessions/76b6b86c8b604965b9a3035731f44946
Requested by: @Colhodm

---

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[devin-ai-integration]

Devin Review found 1 new potential issue.

View 7 additional findings in Devin Review.

[devin-ai-integration]

🟡 Floating-point unit_amount may cause Stripe API rejection for decimal prices

At app/api/stripe/route.js:29, unit_amount: item.price * 100 can produce a non-integer due to floating-point arithmetic (e.g., 29.99 * 100 = 2998.9999999999995). The Stripe API requires unit_amount to be a positive integer in cents and will reject the request otherwise. This should use Math.round(item.price * 100) to ensure an integer value.

Suggested change

	unit_amount: item.price * 100,
	unit_amount: Math.round(item.price * 100),

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

Good catch on the floating-point risk. However, this is pre-existing behavior — the original pages/api/stripe.js has the identical unit_amount: item.price * 100 on line 28. Since this PR's scope is migrating to App Router without changing business logic, I'll leave this as-is. A follow-up fix with Math.round() would be a good improvement though.