The latest articles on DEV Community by spoon yang (@spoon_yang). https://dev.to/spoon_yang https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3866860%2F85051b59-c324-489a-bf2a-655446816302.png https://dev.to/spoon_yang en spoon yang Thu, 09 Apr 2026 07:50:48 +0000 https://dev.to/spoon_yang/how-i-built-an-ai-tattoo-generator-with-nextjs-cloudflare-google-oauth-and-paypal-16hj https://dev.to/spoon_yang/how-i-built-an-ai-tattoo-generator-with-nextjs-cloudflare-google-oauth-and-paypal-16hj <h1> How I Built an AI Tattoo Generator with Next.js, Cloudflare, Google OAuth, and PayPal </h1> <p>I recently shipped <a href="https://bodyink.art/" rel="noopener noreferrer"><strong>BodyInk.art</strong></a>, an AI tattoo generator that helps users explore tattoo concepts before going to a studio.</p> <p>In this post, I want to share the engineering side: what worked, what broke in production, and what I changed to make the app stable.</p> <h2> The Product Goal </h2> <p>Tattoo ideation is often slow:</p> <ul> <li>users collect references from many places</li> <li>style direction is unclear early on</li> <li>multiple revision rounds happen before a final direction</li> </ul> <p>I wanted a workflow where users can type an idea, generate concepts quickly, and download results for discussion with tattoo artists.</p> <h2> Stack Choice </h2> <p>I used:</p> <ul> <li> <strong>Next.js App Router</strong> for pages and API routes</li> <li> <strong>Cloudflare Pages</strong> for deployment</li> <li> <strong>Google OAuth (NextAuth)</strong> for sign-in</li> <li> <strong>PayPal</strong> for pay-per-generation</li> <li>an AI image backend for tattoo image generation</li> </ul> <p>This stack gave me fast iteration and global delivery, but it also exposed some runtime differences I had to handle.</p> <h2> The First Real Production Bug </h2> <p>After deployment, image generation failed with:</p> <p><code>Cannot read properties of null (reading 'has')</code></p> <p>At first it looked like a random null bug, but the root cause was runtime incompatibility. A dependency path assumed Node-like behavior, while the deployed environment executed in an Edge-like context.</p> <h3> What fixed it </h3> <p>I replaced the problematic SDK-dependent path with a simpler fetch-based implementation and removed Node-only assumptions from the generation flow.</p> <p>Result:</p> <ul> <li>no more random null access in the hot path</li> <li>easier debugging because request/response behavior became explicit</li> </ul> <h2> Base64 and Edge Runtime Gotchas </h2> <p>Another source of 500 errors was image encoding. The naive conversion strategy caused performance and reliability issues under constrained runtime conditions.</p> <p>I switched to <strong>chunked Uint8Array processing</strong> instead of relying on heavier Node-oriented patterns. This reduced pressure on runtime limits and made generation responses stable.</p> <p>If you process image buffers on serverless/edge platforms, don’t assume desktop Node behavior will hold.</p> <h2> Adding Google OAuth with NextAuth </h2> <p>I integrated Google sign-in using NextAuth with callback route:</p> <p><code>/api/auth/callback/google</code></p> <p>Implementation notes:</p> <ul> <li>keep OAuth credentials in environment variables</li> <li>define the correct <code>NEXTAUTH_URL</code> per environment</li> <li>verify provider callback settings match your production domain exactly</li> </ul> <p>The biggest practical issue is usually config mismatch, not code.</p> <h2> Adding PayPal: Sandbox First, Then Live </h2> <p>The business rule is simple: <strong>$1 per generation</strong>.</p> <p>I implemented two endpoints:</p> <ul> <li>create order</li> <li>capture payment</li> </ul> <p>And I kept env-driven mode switching so I could test safely in Sandbox and then move to Live.</p> <p>Important details:</p> <ul> <li>lock amount/currency on the server side</li> <li>never trust client-only payment state</li> <li>return clear failure messages to avoid silent checkout errors</li> </ul> <h2> SEO and Analytics </h2> <p>After core flows worked, I optimized discoverability:</p> <ul> <li>improved page-level metadata</li> <li>added sitemap and robots</li> <li>integrated Google Analytics globally</li> </ul> <p>For analytics in Next.js App Router, a framework-aligned integration keeps scripts cleaner and avoids layout-level duplication.</p> <h2> Lessons Learned </h2> <ol> <li>Runtime differences matter more than local success.</li> <li>Keep payment logic server-authoritative.</li> <li>Integrations fail more from misconfiguration than code defects.</li> <li>Production debugging gets easier when dependencies are minimal in critical paths.</li> </ol> <h2> What I’d Improve Next </h2> <ul> <li>better prompt guidance for first-time users</li> <li>stronger style consistency controls</li> <li>smarter retry/fallback strategy for generation failures</li> <li>clearer pricing and credit UX</li> </ul> <h2> Final Thoughts </h2> <p>Shipping AI features is not just model quality. It is mostly engineering reliability:</p> <ul> <li>predictable runtime behavior</li> <li>robust payment flow</li> <li>traceable errors</li> <li>fast iteration loop</li> </ul> <p>If you’re building a similar AI product on Next.js + Cloudflare, I hope this saves you a few painful nights.</p> <p>If you want, I can share a follow-up post with concrete route structure, env templates, and a deployment checklist.</p> ai nextjs showdev webdev