Building a Next.js Static File Deployment System

A structure that separates Next.js project static files into development and production management, automating deployment and Akamai Purge via CI/CD.

Previously, www.saraminimage.co.kr was shared by both development and production, requiring a purge every time an image was re-uploaded, and renaming files left existing resources as garbage. Independent management per branch wasn't possible, causing development resources to mix into the production server, and caching was also invalidated at the whole-unit level.

The solution is to separate image URLs and deployment paths by environment.

• Local development: use /public/static as-is, set NEXT_PUBLIC_IMAGE_URL=/static
• Development environment: NEXT_PUBLIC_IMAGE_URL=__IMAGE_URL__ is replaced in CI/CD with https://dev.saraminimage.com/static/${SERVICE_NAME}/${CI_COMMIT_REF_SLUG}
• Production environment: use a fixed path like https://static.saraminimage.co.kr/static/app
• Legacy compatibility: maintain NEXT_PUBLIC_SARAMIN_IMAGE_URL=https://www.saraminimage.co.kr

In the Next.js configuration, images.loader is set to custom, and allowed domains are restricted via remotePatterns. Image optimization policy was also organized by specifying imageSizes: [96] and deviceSizes: [1920].

The custom image loader splits servers by path prefix.

• /sri/ is the existing saraminimage server
• /images/ is the new static server
• width and quality are appended as query strings for resizing and quality control

In components, usage like <Image src={/images/${name}}> loads new static files in a consistent way. When using images, width/height are specified and alt is provided to maintain Next.js optimization and accessibility.

Deployment is handled with rsync and SSH key configuration.

• Organize static file permissions with find: directories 755, files 644
• Create the target server directory via SSH
• Sync only changes with rsync -rptgoDv --delete-delay --size-only --stats
• Verify the result with ls -lR after deployment

Cache management targets only changed files instead of a full purge. Git diff is used to extract only the modified files under public/static/ to create rsync_changes.log, and based on that list, an array of URLs in the form https://static.saraminimage.co.kr/${IMAGE_PATH}/${file} is constructed. The production cache is then invalidated using purge-cache.js, which uses akamai-edgegrid.

As a result, independent development per branch, separation of production resources, selective purging of only changed files, and automation of image and CSS deployment become possible.