When I started connecting my Next.js frontend to a PHP backend, handling image uploads across both environments was one of the most challenging but rewarding tasks I faced. What seemed simple at first turned out to be a real test of structure, consistency, and attention to detail.

In my setup, the frontend is deployed on Vercel, while the PHP backend API runs on a subdomain hosted via cPanel — for example, api.mymediaproject.com. This separation makes the workflow cleaner: Vercel efficiently handles the frontend performance and deployment, while cPanel manages all backend logic and file storage.

For the upload process, I use FormData in my Next.js frontend to send both form fields and image files together in a single request.

The PHP script on the backend receives the file, validates it, saves it in a designated /uploads/blogs/ folder, and stores only the image filename in the database (not the full path). That simple decision helped me eliminate duplicated URLs and broken links when displaying images on the frontend.

Over time, I improved the workflow by adding image type and size validation and a preview feature in the Next.js app, so users can confirm what they’re uploading before submission.

These small refinements not only made the process more professional but also made debugging and maintenance much easier.

This experience reinforced one important lesson for me: web development isn’t just about getting things to work — it’s about designing clear communication between systems.

With the frontend and backend properly structured and talking to each other efficiently, even something as routine as image upload becomes a smooth, reliable experience.