Intern Code Review Playbook: Shipping Our First Production Change

The Incident: A Next.js Image Optimization Crash on the Academy Careers Page

We were two weeks out from the quarterly careers newsletter going live on 2026-03-15. The academy website runs on Next.js 14, and the careers page uses next/image for every hero banner. Our internship task was small: add a new team member profile card with a portrait image to the existing grid.

The constraint was clear. We could not touch the CMS integration or the image CDN config. That meant no new buckets, no permission changes, no remotePatterns rewrites that affected the hero banners.

The Naive Approach

We copied the hero banner pattern. A div with position: relative, a next/image component with fill, and the S3 URL pointing at the new portrait.

<div className="relative h-48 w-48">
  <Image
    src="https://s3.amazonaws.com/academy-portraits/rajesh.jpg"
    alt="Rajesh Singh"
    fill
    className="object-cover"
  />
</div>

Local dev with next dev served the image instantly. No warnings. No errors. We moved on.

The First Failure

The GitHub Actions staging build failed with:

Error: Image with src "https://s3.amazonaws.com/academy-portraits/rajesh.jpg" must use a static import when using fill

Root cause: next/image in fill mode requires either a static import or a configured remotePatterns entry in next.config.js. We had neither for this bucket.

The Second Failure

We added the S3 bucket to remotePatterns in next.config.js. The build passed. But in staging, the image rendered as a 1x1 pixel placeholder.

Chrome DevTools showed a 403 from the S3 bucket. The portrait was set to private for CMS workflow reasons. We could not change S3 permissions due to the client constraint.

The Working Approach: The Fix We Kept

We switched from next/image to a plain <img> tag for the profile card only.

File path: components/TeamMemberCard.tsx

export default function TeamMemberCard({
  name,
  role,
  imageUrl,
}: {
  name: string
  role: string
  imageUrl: string
}) {
  return (
    <div className="flex flex-col items-center">
      <img
        src={imageUrl}
        alt={name}
        width={192}
        height={192}
        loading="lazy"
        className="h-48 w-48 rounded-full object-cover"
      />
      <h3 className="mt-2 text-lg font-semibold">{name}</h3>
      <p className="text-sm text-gray-600">{role}</p>
    </div>
  )
}

The command that worked: npx next build && npx next start with no next/image config changes.

The Verification

We ran lighthouse --view http://localhost:3000/careers and confirmed CLS stayed at 0.00. Web Vitals in staging showed LCP unchanged and FID under 100ms.

Pitfalls We Would Warn an Intern About

Next.js Image Gotchas

next/image is not a drop-in replacement for <img>. It has strict rules about static vs remote images. fill mode without a configured remotePatterns entry will fail the build, not just warn. S3 objects marked private will silently fail in next/image even if the bucket is in remotePatterns.

Staging vs Local Differences

next dev does not enforce remotePatterns the same way next build does. Always run npm run build && npm start locally before pushing to staging.

Client Constraints Are Real

Never assume you can change infrastructure just because the code works locally. S3 permissions, CDN config, and CMS integrations are often locked down for reasons that are not visible in the codebase.

What We Would Do Differently Next Time

Before Writing Code

Check the next.config.js for existing remotePatterns and images config before touching any image component. Ask the client or team lead about image storage policies upfront.

During Implementation

Use a plain <img> tag for simple, non-critical images like profile cards instead of fighting next/image constraints. Add a visual regression test using Percy or Chromatic to catch rendering issues before staging.

In Code Review

Request a review from someone who has touched the image pipeline before, not just any senior engineer. Include a screenshot of the staging deployment in the PR description to catch visual regressions early.

The Deeper Lesson: Code Review Is About Context, Not Just Correctness

The real lesson came from our code review. Our reviewer did not flag the next/image usage. They flagged the decision behind it. "Why are we using next/image here at all?" That question led to a conversation about when optimization matters and when it does not. It is the same lesson Tanish Chhabra learned at Cvent: code review is not just about correctness. It is about context that lives in the people who have been working on the system long enough to carry it Tanish Chhabra.

Ajay Kumar learned the same thing at AWS: there is no such thing as a small change in production Ajay Kumar.

Ankit Pandey mapped the full flow from code to production at SriTek, and the key step was always the same: request review from senior engineers who know the system Ankit Pandey.

Rishiraj Mukherjee at Intuit found that the moment his code reached production, the real learning began. His first code review comment was not about syntax. It was about architecture Rishiraj Mukherjee.

Priyanshu Raj at IOCL described the shift from being a "coder" to being an engineer as the moment he stopped asking "does it work?" and started asking "does it belong here?" Priyanshu Raj.

Suvit Kumar at an unnamed backend team learned that the most valuable code review feedback came not from a senior engineer, but from a peer who had spent three months wrestling with the same service Suvit Kumar.

Swaraj Patil at Citi mapped the full journey from first commit to production deploy, and the step that caught the most bugs was not testing. It was the pre-review checklist Swaraj Patil.

The Checklist We Now Use Before Every PR

1. Does this image need next/image optimization, or is a plain <img> sufficient?
2. Is the S3 object public, or do I need to use a signed URL?
3. Does next.config.js already list this bucket in remotePatterns?
4. Have I run npm run build && npm start locally, not just next dev?
5. Did I ask someone who has touched this pipeline before to review?
6. Did I include a staging screenshot in the PR description?

We shipped the profile card two days before the newsletter went out. The plain <img> tag never made it into our internal style guide. But the question behind it did.

The question was: "Why are we using next/image here at all?"

That question is now the first thing we ask in every code review.

Resources

• Code Review - The Software Engineer Internship Survival Guide
• I Shipped to Production as an AWS Intern
• What happens AFTER you write code?
• My first code review comment was not about the code
• Ten weeks ago, I walked into Intuit
• Shipping to Production at IOCL
• One of the most valuable lessons from my Backend Engineering Internship
• Two months. Hundreds of commits.