Posts

Why Your Payload CMS Docker Build Fails on MongoDB (and Why It Should Never Need It)

Image
If you deploy a Next.js + Payload CMS site as a Docker image, sooner or later you will meet this error in your build logs: Error: missing secret key. A secret key is needed to secure Payload. payloadInitError: true > Build error occurred Error: Failed to collect page data for /posts/[slug] And if you "fix" that with a dummy secret, its sibling shows up right behind it: ERROR: cannot connect to MongoDB. Details: Invalid scheme, expected connection string to start with "mongodb://" or "mongodb+srv://" Error occurred prerendering page "/" The confusing part: your app works perfectly in development, and the database is up and healthy in production. So why does building an image want to talk to MongoDB at all? To answer that, we need to look at what Next.js and Payload each do — and at exactly when and where your code runs. Part 1: The cast of characters Next.js is not just a compiler When you run next build , two very different things h...
Post a Comment
Read more

LLMs.txt Generator for Geographic AI

Image
Hey all! 👋 I've created an NPM package called  llms-txt-generator-geo-ai  that automatically generates  llms.txt  files for your projects. This is particularly useful for: AI Training Control : Setting policies for how AI models can use our content Geographic Context : Adding location-specific information to our projects Compliance : Managing data collection and usage permissions SEO & Crawlers : Controlling how different bots interact with our content Why do we need llms.txt files? Similar to how  robots.txt  controls web crawlers,  llms.txt  files help us: Control which parts of our content AI models can train on Set clear attribution requirements Specify geographic context for location-based applications Define data usage policies for co...
Post a Comment
Read more

Creating a Responsive Image Component in Next.js with TypeScript

Image
In this tutorial, we'll create a  ResponsiveImg  component that uses the Next.js Image component for optimized  image  rendering.   Introduction The ResponsiveImg Component The ResponsiveImg component accepts properties for both mobile and desktop versions of the image. It uses the useEffect and useState hooks to determine the screen size and adjust the image properties accordingly. Here's the complete code for the ResponsiveImg component: /**  * ResponsiveImg component that renders an image which adapts to screen size.  * It uses the Next.js Image component for optimized image rendering.  *  * @component  * @param {ResponsiveImgProps} props - The properties for the ResponsiveImg component.  * @param {Object} props.mobile - The properties for the mobile version of the image.  * @param {string | StaticImport} props.mobile.src - The source of the mobile image.  * @param {number} props.mobile.width - The width of...
Post a Comment
Read more

try...finally in JavaScript and TypeScript

Image
 In JavaScript, you can use try...finally to ensure that certain cleanup code runs regardless of whether an error occurs. This is useful for releasing resources like memory, files, or network connections. Example: Using try...finally for Cleanup Here's an example of how you might use try...finally to ensure that a file is closed after it has been read, regardless of whether an error occurs during the reading process: const fs = require ( 'fs' ); function readFile ( filePath ) {   let fileDescriptor ;   try {     fileDescriptor = fs . openSync ( filePath , 'r' );     const buffer = Buffer . alloc ( 1024 );     fs . readSync ( fileDescriptor , buffer , 0 , buffer . length , 0 );     console . log ( buffer . toString ());   }   catch ( error ) {     onsole . error ( 'Error reading file:' , error );   }   finally {     if ( fileDescriptor !== undefined ) {       fs...
Post a Comment
Read more