DEV Community: Sohail SJ | TheZenLabs

n8n VPS Comparison: Hostinger vs Railway vs DigitalOcean vs Render

Sohail SJ | TheZenLabs — Wed, 15 Oct 2025 08:33:42 +0000

💡TL;DR: Quick Decision Guide

Don't have time to read 2,500 words? Here's your 60-second decision:

Your Situation	Choose This	Price	Why
🆕 Never touched a server before	Render	$7/mo	Click-and-done setup, upgrade from free tier
🎓 CS student or can follow tutorials	Railway	$5/mo	Best balance of simplicity + value
💼 Agency owner or business builder	DigitalOcean	$4/mo	Enterprise-grade reliability, excellent docs
💰 Developer who wants max resources	Hostinger	$5/mo	4GB RAM, 50GB storage, full control

Stop Paying 10x More Than You Need To

Here's the reality of n8n pricing:

n8n Cloud: $20-100/month with limited executions
14-day trial ends, then: Recurring charges kick in
The alternative: $4-7/month for unlimited workflows on your own server

You could run n8n for an entire year at the cost of one month of n8n Cloud.

After running my free Render instance for 4 months, I hit the wall:

Memory limits crashing complex workflows
Execution delays costing me client trust

I needed reliability without breaking the bank. Here's what I discovered: For as little as $4/month, you can run production-ready n8n with 99.9% uptime, zero cold starts, and room to scale.

I tested 4 different VPS providers over 3 months. Some were incredible value. Others had hidden gotchas that cost me hours of debugging.

This is your complete guide to choosing the right $5/month VPS for n8n— with honest pros/cons, setup complexity ratings, and when to choose each option.

Run n8n for $5/Month — Complete VPS Comparison

The economics:

n8n on Free tier limitations (recap quickly)
n8n Cloud costs $20-100/month for limited projects (after 14-day trial)
$5 VPS sweet spot: Reliable + affordable + unlimited

Who this is for:

✅ Growing solopreneurs (5-50 workflows)
✅ Agencies managing multiple clients
✅ Businesses where uptime matters
❌ NOT for: Massive scale (100+ workflows) or mission-critical enterprise

The Comparison Matrix (Arranged by Ease of Use)

Provider	Price	RAM	Storage	Setup Difficulty	Best For	Rating
Render	$7/mo	0.5GB	10GB	⭐ Beginner	Never touched a server	7/10
Railway	$5/mo	1GB	0.5GB	⭐⭐ Comfortable	CS students, tutorial followers	8/10
DigitalOcean	$4/mo	0.5GB	10GB	⭐⭐⭐ Intermediate	Working developers, business owners	10/10
Hostinger	$5/mo	4GB	50GB	⭐⭐⭐⭐ Advanced	Senior devs, DevOps experience	9/10

Note: <mark>Prices as of October 2025</mark>. Check current pricing before committing.

Provider Deeper Dives (Easiest to Most Advanced)

Option 1: Render ($7/month) — Zero Server Experience Required

Quick Stats:

Price: $7/month (Starter tier)
Resources: 512MB RAM, 0.1 CPU, 10GB storage
Setup Time: 15 minutes
Difficulty: ⭐ Beginner-friendly

Who This Is For:

📊 Marketing managers who need automation but aren't developers
🎨 Designers/creators comfortable with no-code tools
🆕 Complete beginners who've never used command line
💼 Business owners who want to test n8n before scaling

Render Pros:

✅ One-click n8n deployment (uses official template)
✅ Automatic SSL certificates (HTTPS out of the box)
✅ Managed PostgreSQL database included
✅ Easy environment variable management
✅ Auto-deploys from Git (GitOps workflow)
✅ No billing details needed for trial (Credit/Payment Card for paid setup)
✅ Free tier available (upgrade path from previous article)

Render Cons:

❌ Most expensive option at $7/month
❌ Limited resources (512MB RAM can be tight)
❌ No SSH access (can't customize server)
❌ Vendor lock-in (harder to migrate later)

Performance Notes:

Handles 15-25 concurrent workflows smoothly
Starts struggling with memory-intensive operations (large CSV processing, AI models)
Deployment speed: ~3-5 minutes for updates

Full Render n8n Setup Guide →

Option 2: Railway ($5/month) — For Tutorial Followers

Quick Stats:

Price: $5/month (Hobby tier)
Resources:
- Up to 1GB RAM (shared)
- 0.5GB storage
Setup Time: 20 minutes
Difficulty: ⭐⭐ Moderate (follow step-by-step guides)

Who This Is For:

🎓 CS students or bootcamp grads with basic coding knowledge
👨‍💻 Junior developers who've worked with deployment before
📚 Self-learners comfortable following documentation
🛠️ Makers/hobbyists who've dabbled with Docker or GitHub

Railway Pros:

✅ Cheapest true platform option at $5/month
✅ Docker-native (run any custom configuration)
✅ Generous free trial ($5 credit to test)
✅ Beautiful dashboard (best UI of all options)
✅ Built-in PostgreSQL with automatic backups
✅ Custom domains with free SSL
✅ Environment variable templates

Railway Cons:

❌ Resource limits can be unclear (shared compute)
❌ Billing can be confusing (usage-based on top of base $5)
❌ No SSH access to container
❌ Limited documentation for n8n specifically

Performance Notes:

Handles 20-30 workflows comfortably
Better resource allocation than Render in my testing
Cold starts eliminated with always-on instances
Deployment speed: ~2-3 minutes

Full Railway n8n Setup Guide →

Option 3: DigitalOcean ($4/month) — For Working Developers

Quick Stats:

Price: $4/month (Basic Droplet)
Resources:
- 0.5GB RAM
- 1 vCPU
- 10GB SSD
- 500GB Bandwidth
Setup Time: 45-60 minutes
Difficulty: ⭐⭐⭐ Intermediate (requires server setup skills)

Who This Is For:

💼 Product managers with development background
👔 Freelance developers managing client projects
🏢 Small business owners building reliable infrastructure
🔧 Mid-level developers (2+ years experience) who've deployed web apps

DigitalOcean Pros:

✅ Industry-standard platform (trusted by enterprises)
✅ Best documentation (extensive tutorials)
✅ Excellent performance (fast SSD, reliable network)
✅ Marketplace apps (one-click Docker, monitoring)
✅ Floating IPs (easy migration between droplets)
✅ Snapshots & backups ($1-2/month) ✅ Monitoring included (CPU, disk, bandwidth)
✅ Huge community (tons of n8n guides available)

DigitalOcean Cons:

❌ Requires command line knowledge (SSH, Linux basics)
❌ Manual setup (no managed n8n option)
❌ Backups cost extra (Daily at 30% of Droplet cost)
❌ Billing complexity (charges for snapshots, backups, bandwidth)
❌ Learning curve for server management

Performance Notes:

Rock-solid reliability (99.99% uptime in my testing)
Blazing fast SSD storage (great for database operations)
Handles 10+ workflows without breaking a sweat
Network performance is noticeably better than Hostinger

Full DigitalOcean Setup Guide →

Option 4: Hostinger VPS ($5/month) — For Senior Developers

Quick Stats:

Price: $4.99/month (KVM 1 plan, with promo)
Resources:
- 4GB RAM
- 1 vCPU
- 50GB storage
- 10TB Bandwidth
Setup Time: 45-60 minutes
Difficulty: ⭐⭐⭐⭐ Advanced (full server management required)

Who This Is For:

🎯 Senior developers (5+ years) comfortable with Linux systems
⚙️ DevOps engineers or those with infrastructure experience
🏗️ System administrators migrating from on-premise
🔥 Performance enthusiasts who want maximum control and resources

Hostinger Pros:

✅ Best resources for the price (4GB RAM!)
✅ 50GB storage (10x more than Railway/Render)
✅ Full root SSH access (complete control)
✅ Traditional VPS (install anything you want)
✅ Weekly backups included
✅ cPanel option available (easier management)

Hostinger Cons:

❌ Manual setup required (no one-click n8n)
❌ You manage everything (OS updates, security, firewall, etc.)
❌ Steeper learning curve for beginners
❌ No managed database (you install PostgreSQL)
❌ Promo pricing (renews at $8-10/month after year 1)

Performance Notes:

Easily handles 40-60 workflows
Full 4GB RAM makes a huge difference for complex automations
Can run additional services (database, Redis, monitoring)
Great for growth (won't outgrow it quickly)

Hidden Costs:

⚠️ Renewal pricing: $8-10/month after first year
⚠️ Time investment: 5-10 hours/month if you're learning Linux

Full Hostinger n8n Setup Guide →

Decision Framework: Which One Should YOU Pick?

"I've never touched a server before"

→ Render ($7/month)

Zero command line required
Upgrade smoothly from free tier
Worth the extra $2 for peace of mind

"I'm a CS student or can follow step-by-step tutorials"

→ Railway ($5/month)

Best price-to-simplicity ratio
Modern platform to learn on
Great portfolio piece

"I'm building a business and need reliability"

→ DigitalOcean ($4/month)

Enterprise-grade infrastructure
Best documentation
Scales with your needs

"I want maximum resources and know my way around servers"

→ Hostinger ($5/month)

4x the RAM of alternatives
Full control
Most bang for buck

Conclusion

You don't need expensive n8n Cloud subscriptions to run reliable automation. For $5-7/month, you can have:

✅ Production-ready infrastructure
✅ 99.9%+ uptime
✅ Room to scale to 50+ workflows
✅ Full control over your setup

My personal choice: I run DigitalOcean for client work (reliability matters) and Hostinger for personal projects as I purchased 2 years KVM 2 plan from them in July 2025.

Your choice depends on your experience level and specific needs.

The best part? You can always start with one provider and migrate later. These aren't life sentences—they're stepping stones in your automation journey.

Stop paying 10x more than you need to. Pick a provider, follow the guide, and get your $5/month n8n instance running this week.

What's Next?

Coming Soon: "Common Issues with Self-Hosting n8n (And How to Avoid Them)"

In the next article, I'll cover:

Webhook configuration pitfalls
SSL certificate setup mistakes
Memory management strategies
Backup and disaster recovery
Security hardening steps

Subscribe to get notified when it drops.

Join the Skool Community

Want to learn more about n8n fundamentals and pro tricks?

In my Skool community, you'll get:

✅ Advanced n8n architecture templates
✅ Pre-built error handling patterns for production workflows
✅ Cost optimization strategies for when you scale beyond free tiers
✅ Weekly workflow teardowns and automation case studies
✅ Direct access to ask questions and get feedback on your setups

500+ automation engineers are already inside. Join them.

Join the Community (Free) →

Author Bio

Sohail Jafri

Developer & automation enthusiast with 6+ years building production workflows.

GitHub | LinkedIn

Run n8n for Free in Production - Full Guide

Sohail SJ | TheZenLabs — Sun, 12 Oct 2025 11:45:34 +0000

💡 TL;DR Quick Answer:

You can run n8n for free in production using Render’s free tier and a cron-job to prevent cold starts. This setup supports 5–50 workflows reliably and costs $0/month. Setups take 5-10 mins max.

Who This Guide Is For

Before we dive in, let's make sure this is right for you:

✅ Solopreneurs and indie hackers watching every dollar

✅ Developers comfortable with self-hosting (you don't need to be an expert, just willing to learn)

✅ Those running 5-50 workflows (not enterprise scale... yet)

✅ Someone who is just starting out and ain’t ready to invest yet.

❌ NOT for: businesses requiring 99.99% uptime SLAs

Reality check: Free doesn't mean zero effort. You're trading money for setup time and technical ownership. But if you're reading this, you're probably fine with that trade-off.

The Free n8n Stack Architecture

Here's what we're building:

Core Components:

Compute & Database: Render.com (free tier)
Keep-Alive Service: Cron-job.org (free tier)

Why Render for Servers?

Render provides a one-click setup for n8n server and includes both free compute and a free PostgreSQL database. No credit card required to get started, and this free self-hosted n8n setup is surprisingly straightforward.

Why Do We Need a Cron Job Service?

Here's the catch with Render's free tier: the server spins down after 15 minutes of inactivity. When a request comes in, it takes 30-60 seconds to spin back up. This means:

❌ Scheduled workflows might miss their execution window

❌ Webhook responses will be delayed on the first hit

❌ User experience suffers during cold starts

The solution: A cron job that pings your server every 10 minutes to keep it warm and running.

I use cron-job.org because it's dead simple and reliable, but any of these will work.

Alternative cron services you can use:

Let's Start Building!

Phase 1: Setup Your n8n Server on Render

Step 1: Sign Up for a Free Render Account for n8n

Navigate to https://dashboard.render.com/register and sign up for a free account.

Step 2: Create Your n8n Repository

Open the official n8n Render template: https://github.com/render-examples/n8n
Click "Use this template" → "Create a new repository" in the top right (you need github account for this)
In the form that appears, configure your new repository:

Give it a name (e.g., my-free-n8n-instance)
Choose Public or Private (your preference)
Click "Create repository"

Step 3: Deploy to Render

Head back to your Render dashboard
Click "New" → "Blueprint"
Under "Connect a repository," click the "Connect" button for the repo you just created
Grant Render access to your GitHub repository if prompted

Step 4: Configure Your Blueprint

This opens a Blueprint creation form that lists the resources Render will create from your render.yaml file:

Web Service: Your n8n instance
PostgreSQL Database: For storing workflow data

Provide a Blueprint Name (e.g., "n8n Production")
Confirm you're pulling the correct Branch (usually main)
Click "Deploy Blueprint"

Step 5: Wait for Deployment

Render will now:

Spin up a PostgreSQL database
Deploy your n8n instance
Connect them automatically

This takes about 3-5 minutes. You'll see status updates in real-time.

Step 6: Access Your n8n Instance

Once both resources show as "Available," navigate to your web service's page in the Render Dashboard
Your onrender.com URL appears at the top (e.g., https://your-n8n-abc123.onrender.com)
Click this URL to access your n8n instance for the first time
Completed the setup and add free license key.

🎉 Congratulations! You now have a fully functional n8n instance running for free.

Phase 2: Prevent n8n Server Cold Starts with Cron-job.org

Now let's prevent your server from going to sleep.

Step 1: Create Your Cron-Job.org Account

Go to https://cron-job.org
Click "Sign up" and create a free account
Verify your email address

Step 2: Create Your Keep-Alive Job

After logging in, click "Cronjobs" → "Create Cronjob"
Fill in the configuration:

Basic Settings:

Title: n8n Keep Alive
URL: Your n8n Render instance URL (e.g., https://your-n8n-abc123.onrender.com)

Schedule Configuration:

Schedule: Every 10 minutes
Use the cron expression: */10 * * * *
Or use their visual scheduler to select "Every 10 minutes”
Click "Create Cronjob" → Done ✅

Want to learn more?

No fluff. Just battle-tested automation strategies from 6 years of building production systems.

Join the Community →

FAQs

Can I run n8n free forever?

Yes, for small to medium workloads within Render free tier limits.

How many workflows can I run on Render free tier?

Approximately 5–50, depending on workflow complexity.

Do I need a VPS for production?

Only if your workflows exceed free tier limits or need higher uptime.

Verification & Testing

Now let's make sure everything works:

Test Your n8n Instance

Visit your n8n URL
Create a test workflow with a simple webhook
Trigger it manually
Check that it executes successfully

Monitor Your Cron Job

Go back to cron-job.org dashboard
After 10 minutes, check the "Last execution" status
You should see a successful ping (green checkmark)
If it fails, double-check your URL is correct

Check Server Uptime

Over the next few hours, periodically visit your n8n instance. It should respond quickly without cold start delays.

What You've Just Built

Let's recap what you now have:

✅ Production-ready n8n instance with PostgreSQL database

✅ Zero monthly costs (completely free)

✅ Unlimited projects/workflow executions (within Render's compute limits)

✅ Automated keep-alive system to prevent cold starts

✅ Full control over your automation infrastructure

The Trade-Offs (Let's Be Honest)

What you're giving up vs n8n Cloud:

❌ No managed updates – You'll need to manually update your n8n version

❌ You own uptime – If Render has issues, you'll need to troubleshoot

❌ Free tier compute limits – Heavy workflows might hit memory constraints

❌ Cold starts still possible – If the cron job fails, your server sleeps

What you're gaining:

✅ $564/year saved (vs $47/month n8n Cloud for 3 projects)

✅ Unlimited projects

✅ Unlimited operations

✅ Full technical control and learning opportunity

✅ Easy to upgrade when you need more power

When Should You Upgrade to Paid?

You'll know it's time to graduate from the free tier when:

[ ] You're running 50+ workflows consistently
[ ] Execution delays start impacting your business
[ ] You need advanced features like SSO or audit logs
[ ] Downtime costs you more than $50/month
[ ] You're spending 2+ hours/month on maintenance

At that point, consider either:

Upgrading to n8n Cloud ($20-100/month) for managed service
Moving to a paid VPS ($5-20/month) like hostinger or digital ocean for more control with better resources

Final Thoughts

Running n8n for free isn't just about saving money—it's about understanding your infrastructure, owning your tools, experimenting and learning what works for your specific use case.

You now have a production-ready automation setup that costs nothing and gives you complete control.

Start small: Migrate one workflow at a time. Test thoroughly. Then scale up as you gain confidence.

Join the Community

This guide gives you the foundation. In my Skool community, I share:

✅ Advanced n8n architecture templates

✅ Pre-built error handling patterns for production workflows

✅ Cost optimization strategies for when you scale beyond free tiers

✅ Weekly workflow teardowns and automation case studies

✅ Direct access to ask questions and get feedback on your setups

No fluff. Just battle-tested automation strategies from 6 years of building production systems.

Join the Community →

Questions? Stuck on setup? Drop a comment below or join the Skool community—I respond to every question within 24 hours.

Author Bio

Sohail Jafri

Developer & automation enthusiast with 6+ years building production workflows.

GitHub | LinkedIn

Brutal Truths About Freelancing: Income, Struggles and Relationships

Sohail SJ | TheZenLabs — Mon, 06 Jan 2025 14:43:23 +0000

This is a submission for the 2025 New Year Writing challenge: Retro’ing and Debugging 2024.

Hey Dev,

So 2024 was my first year as a freelancer, and let me tell you, it was a rollercoaster ride. I had always dreamed of being my own boss, setting my own hours, and working on projects I was passionate about.

But the reality of freelancing was far more brutal than I had imagined. From the feast-or-famine income to the isolation struggles, I faced some hard truths about the freelance life.

But through it all, I learned valuable lessons that have shaped me as a professional and as a person. Lets dive into some of my learnings from the past year.

My Freelance Journey in 2024

The Rollercoaster of Income 🎢💸

Im grateful for the income I earned as a freelancer, as I started earning in college when I was 19. So when college ended, I had a good confidence in my skills and was able to get clients. But the income was never consistent. Some months I was rolling in cash, while others I was scraping by.

Few things I learned about managing finances as a freelancer:

Have 2 bank accounts, one for savings and one for expenses.
Allocate a fixed amount for expenses every month, rest all goes to savings.
Diversify income streams to reduce the impact of slow months. This could be through different types of projects, passive income streams, or part-time work.
Plan your expenses in advance.
Have a emergency fund ready like 6 months of expenses.

The Isolation Struggle 🤝🏠

Freelancing can be a lonely profession. I spent hours working alone in my home office, with no one to talk to or bounce ideas off of. It was isolating, especially during busy periods when I was working long hours to meet deadlines.

But Im grateful for the close friends I have who are in the same field. We would often work together on weekends, share our struggles and successes, and provide support when needed.

How to combat loneliness as a freelancer:

Hit GYM or go for a walk.
Join a co-working space.
Attend meetups or networking events.
Opt for in-person meetings with clients.
Join online communities or forums for freelancers, Btw Dev.to and X/Twitter are great for this. Say Hi on X @thesohailjafri

Client Relationships and Challenges 🤝⚡

I had my fair share of difficult clients in 2024. Some were demanding, others were slow to pay, and a few were just out t milk every penny out of me. But these experiences taught me valuable lessons about setting boundaries, communicating effectively, and standing up for myself.

On the flip side, I also had some amazing clients who were a joy to work with. They appreciated my work, paid on time, and treated me with respect.

These positive experiences made the tough moments worthwhile and reminded me why I chose to freelance in the first place.

How to deal with difficult clients:

Set clear expectations from the start.
Highlight your boundaries and communicate them clearly and assertively.
Dont be rude, but be firm when necessary when dealing with difficult clients.
Know when to walk away from a toxic client.
Keep client in the loop about the progress of the project. Dont ghost them.

Work-Life Balance is a Myth 🏡⚖️

One of the biggest challenges I faced as a freelancer was maintaining a healthy work-life balance.

When your office is in your home, You work from the same place you relax. It can be hard to switch off at the end of the day and take time for yourself.

But I learned the importance of setting boundaries and establishing a routine that works for me. I started setting strict work hours, taking regular breaks, and making time for hobbies and self-care.

Tips for maintaining work-life balance:

Set a schedule and stick to it.
Create a dedicated workspace that is separate from your living area.
Take regular breaks throughout the day. 4hr work, 1hr break.
Take time off when you need it. You are not AI agent.
Touch base with friends and family regularly/weekly.

Skill Development and Growth 📚🚀

Well this one is constant. I learned a lot of new skills in 2024, from web development to SEO to project management to content creation. I also grew as a person, becoming more confident in my abilities and more resilient in the face of challenges.

I like to invest my time in learning new things, so I took a few courses from mosh and worked one some open-source projects. I also read a lot of books on freelancing, business, and personal development.

Projects I have worked on:

ChakraFramer
With Sam
Asahi Ramen
My Music Pie Chart
Monkey Ninja
GPA Calculate
2 Native iOS and Android Apps
3 CRMs
and more

Best books I read in 2024:

Never Split the Difference by Chris Voss
Psychology of Money by Morgan Housel
48 Laws of Power by Robert Greene
Surrounded by Idiots by Thomas Erikson
The $100 Startup by Chris Guillebeau

Looking Ahead to 2025 🎯✨

In 2025, I hope to continue growing my web development agency TheZenLabs and growing me personal brand on Dev.to, YouTube, Instagram and X. I also want to focus on building passive income streams and expanding my network of clients and collaborators.

Also I would be to expand my skillset by including React-Native and Docker+Kubernetes as these will highly compliment my current skillset and make me a whole software development agency itself 😆.

But most importantly, I want to continue learning, growing, and challenging myself in the year ahead. Freelancing is not easy, but its worth it for the freedom and flexibility it offers.

Conclusion

2024 was a year of growth, challenges, and hard truths. But through it all, I learned valuable lessons that have shaped me as a professional and as a person. I hope my experiences can help other freelancers navigate the ups and downs of the freelance life.

If you are a freelancer, I would love to hear about your experiences in 2024. What were your biggest challenges? What were your proudest achievements? Lets share our stories and support each other as we continue on this freelance journey together.

Thanks for reading and happy freelancing in 2025! 😊

Don't Make This Mistake: Choosing the Wrong Database Could Cost You!

Sohail SJ | TheZenLabs — Thu, 02 Jan 2025 16:37:32 +0000

So, consider you're building a startup, and it’s time to decide where all that precious data is going to live. Is it SQL or NoSQL? Relax, it’s not as intimidating as it sounds. Let’s break it down, startup-style. 🚀

Why Your Database Choice Matters

Your database is the backbone of your application. Here’s why it’s a big deal:

Scalability: Can it handle your next big growth spurt? 📈
Speed: How quickly can you fetch and update data? ⚡
Flexibility: Does it adapt to your app’s ever-changing needs? 🤹
Cost: Is it startup-friendly? 💸

Let’s dive into the key contenders: SQL and NoSQL.

SQL Databases: The Old-School Dependable
NoSQL Databases: The Cool New Kid
SQL vs NoSQL: A Quick Comparison
How to Decide
The Sweet Spot: Why Not Both?
TL;DR: SQL or NoSQL?

SQL Databases: The Old-School Dependable

Origin Story:

SQL's journey began in 1974 with IBM's System R project, which aimed to showcase the relational model's potential. By the 1980s, SQL became the standard for relational database management systems (RDBMS), with Oracle being one of the first to commercialize it.

Pros:

Structured Data: Perfect if you’re working with well-defined data (think rows and columns).
ACID Compliance: Your data’s integrity is rock solid.
Proven Reliability: Think of giants like MySQL, PostgreSQL, and Microsoft SQL Server.
Complex Queries: Handle complex relationships with ease.
Tooling Ecosystem: Extensive tooling like SQL Server Management Studio (SSMS), pgAdmin, and ORMs like Sequelize and Hibernate.

Unique Features:

Joins and Relationships: Efficiently handle complex relationships across tables.
Stored Procedures: Encapsulate business logic within the database.

Use Cases:

Financial applications 💰
E-commerce sites 🛍️
Healthcare systems 🏥

Watch Out For:

Scalability: Vertical scaling (buying bigger servers) can get expensive.
Rigidity: Adding new data types or relationships can be a hassle.

NoSQL Databases: The Cool New Kid

Origin Story:

NoSQL's roots lie in the need for scalability and flexibility that traditional RDBMS couldn’t provide. Early implementations, like Google’s Bigtable (2004) and Amazon’s Dynamo (2007), inspired modern NoSQL solutions such as MongoDB, Cassandra, and Redis.

Pros:

Flexibility: Works great for unstructured or semi-structured data.
Horizontal Scaling: Add more servers instead of bigger ones.
Speed: Optimized for high-speed read and write operations.
Variety: Choose the type that fits your needs: document (MongoDB), key-value (Redis), column-family (Cassandra), or graph (Neo4j).
Tooling Ecosystem: Tools like Compass (MongoDB), RedisInsight, and cloud-native solutions like AWS DynamoDB.

Unique Features:

Dynamic Schemas: No need to predefine your schema; adapt as your app evolves.
Geospatial Queries: Built-in support for location-based queries in some databases like MongoDB.

Use Cases:

Real-time apps (chat apps, gaming leaderboards) ⏱️
Content management systems 📚
Internet of Things (IoT) devices 🤖

Watch Out For:

Consistency: Some NoSQL databases sacrifice consistency for scalability (eventual consistency).
Learning Curve: Can be tricky to pick the right one and set it up.

SQL vs NoSQL: A Quick Comparison

Feature	SQL	NoSQL
Definition	Relational, table-based	Non-relational, flexible
Year of Origin	1970s	Late 2000s
Data Structure	Structured (tables)	Flexible (JSON, key-value, etc.)
Scalability	Vertical	Horizontal
Schema	Fixed	Dynamic
Tooling	Mature and extensive	Emerging but innovative
Unique Features	Joins, ACID compliance	Dynamic schemas, geospatial queries
Use Case	Complex queries, transactions	High-speed, unstructured data

How to Decide

Still on the fence? Here are some tips:

Start with Your Data: Is it structured or unstructured? 🧐
Think About Growth: Will you scale up quickly? 📈
Know Your App: What kind of queries and speed do you need? 🛠️
Test It Out: Try small-scale implementations of both. 🧪

The Sweet Spot: Why Not Both?

Who says you have to choose? Many startups use a hybrid approach:

SQL for Core Data: Use SQL for transactional and critical data. 🗂️
NoSQL for Flexibility: Use NoSQL for high-speed and scalable operations. ⚡
Prisma for Integration: Tools like Prisma act as a unified layer, allowing you to handle multiple databases (SQL and NoSQL) seamlessly. This adds a layer of abstraction, making it easier to manage and query data from diverse sources. 🤝

TL;DR: SQL or NoSQL?

SQL: Go for it if your data is structured and relationships are crucial. 🏛️
NoSQL: Your best bet for fast, flexible, and scalable needs. 🌐
Both? Why not leverage the strengths of both? 🤹

At the end of the day, your choice should align with your app’s needs, your team’s expertise, and your growth ambitions. Choose wisely, and watch your startup soar! Happy Coding!

Get in touch

Platform	Handle
Youtube	@thesohailjafri
X/Twitter	@thesohailjafri
LinkedIn	@thesohailjafri
Instagram	@thesohailjafri
Github	@thesohailjafri

Do check these tips for SEO Boost

Sohail SJ | TheZenLabs — Sun, 29 Dec 2024 08:39:23 +0000

The Must-Have SEO Checklist for Developers For 2025

Sohail SJ | TheZenLabs ・ Dec 29 '24

#webdev #javascript #nextjs #react

The Must-Have SEO Checklist for Developers For 2025

Sohail SJ | TheZenLabs — Sun, 29 Dec 2024 08:38:22 +0000

Hey, Devs!

So I have been working on a few SEO Focused projects lately and I thought I would share some of the best practices and strategies I have learned along the way for Next.js developers.

Next.js SEO Checklist For 2025

Table of Contents

Optimize Metadata
URL Structure and Routing
Content Optimization
Page Speed and Core Web Vitals
Image Optimization
Mobile-Friendliness
Sitemap, Robots.txt and Favicons
Internal Linking
Server-Side Rendering (SSR) and Static Site Generation (SSG)
Schema Markup
Canonical Tags and Avoiding Duplicates
Open Graph and Twitter Cards
Error Handling
Semantic HTML
Performance Optimization
Analytics and Monitoring
General Best SEO Practices for 2025

1. Optimize Metadata

Use the next/head component to include metadata like titles, descriptions, and canonical tags (Next.js Head Documentation).
Optimizing metadata is crucial for SEO as it improves click-through rates, provides search engines with context about the page, and helps rank relevant content higher in search results.

Pages Router Example:

import Head from 'next/head'

export default function Page() {
  return (
    <Head>
      <title>Page Title</title>
      <meta name="description" content="Page Description" />
      <link rel="canonical" href="https://example.com/page" />
    </Head>
  )
}

With Page Router approach is straightforward and easy to implement.

App Router Example:

export const metadata = {
  title: 'Page Title',
  description: 'Page Description',
}

The App Router approach we use the metadata property in the layout or page file (Next.js Metadata API).

2. URL Structure and Routing

Implement clean, descriptive, and hierarchical URLs (e.g., /blog/seo-checklist instead of /blog?id=123).
Clean URLs improve user experience by making them easier to read and remember, and they help search engines understand the site’s structure more effectively, enhancing discoverability.
Use Next.js dynamic routing for better URL control (Dynamic Routing Guide).
Avoid deep nesting in URLs to keep them user-friendly.

# Good URL Structure
| root
|--- app
|------ blog
|--------- seo-checklist

# Bad URL Structure
| root
|--- app
|------ blog
|--------- 2022
|------------ 01
|--------------- 01
|------------------ seo-checklist

3. Content Optimization

Research keywords and include them naturally in content (Google Keyword Planner).
Avoid keyword stuffing; focus on providing value. Keep keywords in a range of 1-3% of the total content.
Regularly update content to keep it fresh and relevant.
Related Refs: Types of Keywords in SEO, Keyword Density Checker.

4. Page Speed and Core Web Vitals

Monitor and improve metrics like LCP, FID, and CLS using tools like Lighthouse or PageSpeed Insights (Google PageSpeed Insights).
Optimize fonts, use preloading, and avoid large layout shifts. Read more about Optimizing Fonts and Images.
Use tools like WebPageTest to analyze performance and identify bottlenecks.

5. Image Optimization

Use the Next.js Image component for automatic image optimization (Image Component Documentation).
Serve responsive images with appropriate sizes and srcSet attributes.
Include descriptive alt text for accessibility and image SEO (W3C Accessibility Guidelines).

6. Mobile-Friendliness

Use responsive design principles ie Responsive Web Design.
Test pages with Google’s Mobile-Friendly Test tool (Mobile-Friendly Test).
Ensure content is easily accessible and readable on mobile devices as more 70% traffic from mobile devices on an avg.

7. Sitemap, Robots.txt and Favicons

Sitemap

A sitemap is a file that lists all the URLs on your site. It helps search engines discover and index your content more efficiently.
Create an XML sitemap and submit it to search engines like Google (Google Search Console Sitemap Submission).

Video on Generate Sitemap Via next-sitemap NPM Package

Video on Generate Dynamic Sitemap For CMS/DB Data

Robots.txt

A robots.txt file tells search engine crawlers which pages or files they can or cannot request from your site. It is important to have a well-structured robots.txt file to guide search engine crawlers.
Configure a robots.txt file to guide search engine crawlers (Robots.txt Guide).

Favicons

You must have seen favicons in the browser tab, bookmarks, and mobile apps. They are website icons that help users identify your site.
Include Favicons for better user experience and branding. Use tool like Favicon IO, Real Favicon Generator to generate favicons. This great tool as it provides favicons in different sizes and formats as well as manifest.json file.

# Example of favicon
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />

8. Internal Linking

Use meaningful anchor text for internal links.
Avoid broken links by regularly auditing your site (Broken Link Checker Tool).
Implement breadcrumbs for better navigation and SEO (Breadcrumb Schema Guide).

Pro Advice I use linkMap to manage internal links in my projects. It is a simple key value pair object that I use to manage all the internal links in my project. This way I can easily update the links in one place and it will reflect across the entire project.

// linkMap.js
export const linkMap = {
  home: '/',
  about: '/about',
  services: '/services',
  contact: '/contact',
}

9. Server-Side Rendering (SSR) and Static Site Generation (SSG)

Choose the appropriate rendering method (getServerSideProps, getStaticProps, or ISR) based on content requirements (Next.js Data Fetching).
Use SSR for dynamic content that changes frequently.
Use SSG or ISR for pages with static or semi-static content for better performance and SEO.

Video on App Router SSR and SSG

Video on Page Router SSR and SSG

10. Schema Markup

Add structured data using JSON-LD format for rich results (Google’s Structured Data Testing Tool).
Include schema types like Breadcrumb, Article, Product, or FAQ depending on your content (Schema.org Documentation).
Use NPM Packages like next-seo or schema-dts for easy schema implementation. Read more about Next-SEO and Schema DTS for JSON-LD schema.

11. Canonical Tags and Avoiding Duplicates

What is a canonical tag? A canonical tag is a meta tag that tells search engines which version of a URL you want to be treated as the primary version. This helps prevent duplicate content issues.
Like your home page can be accessed from multiple URLs like https://example.com, https://example.com/index.html, https://example.com/home, etc.
You can use a canonical tag to tell search engines that https://example.com is the primary URL. Read more about Canonical URL Guide.
Dynamically set canonical URLs in the <head> section based on the current route.

<link rel="canonical" href="https://example.com/page" />

12. Open Graph and Twitter Cards

Add Open Graph tags (og:title, og:description, og:image) for social sharing (Open Graph Protocol).

Pages Router Example

import Head from 'next/head'

export default function Page() {
  return (
    <Head>
      <meta property="og:title" content="Page Title" />
      <meta property="og:description" content="Page Description" />
      <meta property="og:image" content="https://example.com/image.jpg" />
      <meta property="og:type" content="website" />
      <meta property="og:url" content="https://example.com/page" />
      <meta name="twitter:card" content="summary_large_image" />
    </Head>
  )
}

App Router Example

export const metadata = {
  openGraph: {
    title: 'Page Title',
    description: 'Page Description',
    images: [
      {
        url: 'https://example.com/image.jpg',
        width: 800,
        height: 600,
        alt: 'Image description',
      },
    ],
    type: 'website',
    url: 'https://example.com/page',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Page Title',
    description: 'Page Description',
    images: ['https://example.com/image.jpg'],
  },
}

Include Twitter Card metadata for better link previews on Twitter (Twitter Cards Documentation).

13. Error Handling

Create custom 404 and 500 pages using pages/404.js and pages/500.js (Next.js Error Pages Documentation).
Ensure they are informative and guide users back to functional pages.
Also checkout this awesome Not Found Page Collection By Awwwards.

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}

// pages/500.js
export default function Custom500() {
  return <h1>500 - Server-Side Error</h1>
}

14. Semantic HTML

Use semantic HTML elements like <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> for better accessibility and SEO.
Check all available HTML elements at MDN Web Docs.
Semantic HTML helps search engines understand the structure of your content and improves accessibility for users with disabilities.

<!-- Bad Example of Semantic HTML -->
<div class="header">
  <div class="nav">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div>
</div>
<!-- Good Example of Semantic HTML -->
<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

15. Performance Optimization

Use CDN for serving static files (Vercel Edge Network).
Minimize and bundle JavaScript with code-splitting and tree-shaking (Webpack Optimization Guide).
Implement lazy loading for images and components.
Enable next.config.js settings like compression and reactStrictMode (Next.js Configuration).
These settings contribute to faster page loads and better user experiences.

Example Configuration

// next.config.js
module.exports = {
  reactStrictMode: true,
  compress: true,
  images: {
    domains: ['example.com'], // Add domains for optimized images
  },
}

16. Analytics and Monitoring

Integrate Google Analytics or other tracking tools (Next.js Analytics Integration).
Use Google Search Console to monitor indexing, search performance, and errors (Search Console Guide).
These tools help monitor user behavior and identify potential areas for SEO improvement, such as high bounce rates or underperforming pages.

If you want a lite setup use these

UMAMI - A simple, easy-to-use, self-hosted web analytics tool.
Google Web Master Tools - Google Search Console is a free service offered by Google that helps you monitor and maintain your site's presence in Google Search results.

I prefer using Umami + Google Web Master Tools for my personal projects such (Chakra Framer)

17. General Best SEO Practices for 2025

Focus on Search Intent: Understand and address the user’s needs and queries. Align your content with the questions and needs your audience is searching for.
Voice Search Optimization: Optimize for long-tail, conversational queries by incorporating structured FAQs and direct answers on pages.
A/B Testing for SEO: Regularly A/B test meta descriptions, titles, or content variations to identify what resonates with users and drives traffic.

I hope these tips help you build your next Billion Dollar App. Happy Coding!

Get in touch

Platform	Handle
Youtube	@thesohailjafri
X/Twitter	@thesohailjafri
LinkedIn	@thesohailjafri
Instagram	@thesohailjafri
Github	@thesohailjafri

How to Create Fully Customized Sitemap in NextJS using Custom Postbuild Script

Sohail SJ | TheZenLabs — Tue, 10 Dec 2024 17:54:28 +0000

In last two blogs, I explained how to create a sitemap for a website in your NextJS project using the next-sitemap package and manually. In this blog, I will explain how you can create a fully customized sitemap for your website in NextJS using a custom postbuild script.

But if you are rocking a static website, you can use the next-sitemap package to create a sitemap as it will be much easier and faster. But if you are looking to create a fully customized sitemap, you can use the custom postbuild script approach.

Why this technique is important? Because sometimes you need to create a sitemap with a specific requirement like

Each year/folder/collection etc will have its own sitemap
Exclude some pages from the sitemap
Add custom priority, changefreq, and lastmod for each page
Add custom tags for each page and many more.

But unlike our first article in series, we will do it manually. This is will fully automated and you can customize it as per your requirements. So brew a coffee and lets get started 🚀

Complementary Video Tutorial

If you prefer a visual walkthrough, check out this helpful video that complements the steps in this blog:

"Click the above player or here to watch the video on YouTube."

Prerequisites

Basic knowledge of NextJS
Basic knowledge of JavaScript
Basic knowledge of XML

Table of Content

Step 1: Create a custom postbuild script
Step 2: Install globby package
Step 3: Add the following code in the generate-sitemap.mjs file
Step 4: Add the following script in your package.json
Step 5: Run the build command
Step 6: Check the sitemap.xml file in the public folder of your project
Conclusion
Get in touch

Step 1: Create a custom postbuild script

Create a scripts folder in the root of your project and add a generate-sitemap.mjs file in it.

Step 2: Install globby package

npm install globby

Wait a minute, what is globby? and why we need it?

Globby is a package that helps you to match files using the patterns the shell uses, like stars and stuff. We will use it to get all the pages from project build folder.

Step 3: Add the following code in the `generate-sitemap.mjs` file

Before I share whole code, I would like to explain few key points in the code.

siteUrl: Base URL of your website
fullUrl: Function that will return the full URL of the page ie siteUrl + path
defaultConfig: Default configuration for each page in the sitemap
homeConfig: Configuration for the home page
nextApproach: Approach you are using for the your NextJS project, it can be app or pages,

nextApproach is important because the build path for NextJS pages router is .next/server/pages and for NextJS app router is .next/server/app. So depending on the approach you are using, you need to change the path in the code.

import { writeFileSync } from 'fs'
import { globby } from 'globby'

const siteUrl = 'https://example.com'
const fullUrl = (path) => siteUrl + path
const defaultConfig = {
  changefreq: 'weekly',
  priority: '0.7',
  lastmod: new Date().toISOString(),
}

const homeConfig = {
  loc: '/',
  changefreq: 'monthly',
  priority: '1.0',
  lastmod: defaultConfig.lastmod,
}

const nextApproach = 'app' // app or pages
const serverPath = `.next/server/${nextApproach}`

async function generateSitemap() {
  // Grub Pages from build
  const buildPages = await globby([
    // *** Include ***
    // include all html files and nested html files
    `${serverPath}/*.html`,
    `${serverPath}/**/*.html`,
    // *** Exclude ***
    // /index.html is same as / so we will exclude it, along with 404, 500 and _not-found pages, cool right?
    `!${serverPath}/index.html`,
    `!${serverPath}/404.html`,
    `!${serverPath}/_not-found.html`,
    `!${serverPath}/500.html`,
  ])

  const sitemapStr = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
            <url>
                    <loc>${fullUrl(homeConfig.loc)}</loc>
                    <lastmod>${homeConfig.lastmod}</lastmod>
                    <changefreq>${homeConfig.changefreq}</changefreq>
                    <priority>${homeConfig.priority}</priority>
            </url>
            ${buildPages
        .map((page) => {
          const path = page.replace(serverPath, '').replace('.html', '')
          const loc = fullUrl(path)
          const lastmod = new Date().toISOString()
          let changefreq = defaultConfig.changefreq
          let priority = defaultConfig.priority
    if (path === '/products') {
            priority = '0.9' // Higher priority for the index products page
            changefreq = 'daily'
          } else if (path.includes('/products/')) {
            priority = '0.6' // Higher priority for the slug products page
            changefreq = 'daily'
          }
          return `<url>
                                <loc>${loc}</loc>
                                <lastmod>${lastmod}</lastmod>
                                <changefreq>${changefreq}</changefreq>
                                <priority>${priority}</priority>
                        </url>
                    `
        })
        .join('')}
    </urlset>
    `

  writeFileSync(`public/sitemap.xml`, sitemapStr)
}

generateSitemap()

This code will produce a single sitemap.xml file in the public folder of your project.

But if you want to create multiple sitemaps, you create a multiple globby configurations and write multiple sitemap files in the public folder.

Continue reading to learn how to create multiple sitemaps or skip to next step if you only want to create a single sitemap.

Very Important Point below if you going to have multiple sitemaps in your project.

First Point: Include all the sitemaps in the robots.txt file, so that search engines can find all the sitemaps.
Second Point: Create a Index sitemap file that will include all the sitemaps links.

Side Quest: How to create multiple sitemaps

To create multiple sitemaps, you can create multiple globby configurations and write multiple sitemap files in the public folder.

import { writeFileSync } from 'fs'
import { globby } from 'globby'

const siteUrl = 'https://example.com'
const fullUrl = (path) => siteUrl + path
const defaultConfig = {
  changefreq: 'weekly',
  priority: '0.7',
  lastmod: new Date().toISOString(),
}

const homeConfig = {
  loc: '/',
  changefreq: 'monthly',
  priority: '1.0',
  lastmod: defaultConfig.lastmod,
}

const nextApproach = 'app' // app or pages
const serverPath = `.next/server/${nextApproach}`

async function generateSitemap() {
  // Grub Pages from build for products
  const productPages = await globby([
    // *** Include ***
    // include all html products files and nested html files
    `${serverPath}/products/*.html`,
    `${serverPath}/products/**/*.html`,
    // *** Exclude ***
    // /index.html is same as / so we will exclude it
    `!${serverPath}/products/index.html`,
  ])

  // Create multiple sitemaps
  const productSitemapStr = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
            <url>
                    <loc>${fullUrl('/products')}</loc>
                    <lastmod>${new Date().toISOString()}</lastmod>
                    <changefreq>daily</changefreq>
                    <priority>0.9</priority>
            </url>
            ${productPages
        .map((page) => {
          const path = page.replace(serverPath, '').replace('.html', '')
          const loc = fullUrl(path)
          const lastmod = new Date().toISOString()
          const changefreq = 'daily'
          const priority = '0.8'
          return `<url>
                                <loc>${loc}</loc>
                                <lastmod>${lastmod}</lastmod>
                                <changefreq>${changefreq}</changefreq>
                                <priority>${priority}</priority>
                        </url>
                    `
        })
        .join('')}
    </urlset>
    `

  writeFileSync(`public/product-sitemap.xml`, productSitemapStr)

  // You can do the same for other sitemaps. But lets move on to the next step.

  // lets create a sitemap for rest of the pages

  const restPages = await globby([
    // *** Include ***
    // include all html files and nested html files
    `${serverPath}/*.html`,
    `${serverPath}/**/*.html`,
    // *** Exclude ***
    // /index.html is same as / so we will exclude it, along with 404, 500 and _not-found pages, cool right?
    `!${serverPath}/index.html`,
    `!${serverPath}/404.html`,
    `!${serverPath}/_not-found.html`,
    `!${serverPath}/500.html`,
    // Exclude products pages
    `!${serverPath}/products/*.html`,
    `!${serverPath}/products/**/*.html`,
  ])

  const restSitemapStr = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
            <url>
                    <loc>${fullUrl(homeConfig.loc)}</loc>
                    <lastmod>${homeConfig.lastmod}</lastmod>
                    <changefreq>${homeConfig.changefreq}</changefreq>
                    <priority>${homeConfig.priority}</priority>
            </url>
            ${restPages
        .map((page) => {
          const path = page.replace(serverPath, '').replace('.html', '')
          const loc = fullUrl(path)
          const lastmod = new Date().toISOString()
          let changefreq = defaultConfig.changefreq
          let priority = defaultConfig.priority

          return `<url>
                                <loc>${loc}</loc>
                                <lastmod>${lastmod}</lastmod>
                                <changefreq>${changefreq}</changefreq>
                                <priority>${priority}</priority>
                        </url>
                    `
        })
        .join('')}
    </urlset>
    `

  writeFileSync(`public/rest-sitemap.xml`, restSitemapStr)

  // Create a index sitemap file
  const indexSitemapStr = `<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        <sitemap>
            <loc>${fullUrl('/product-sitemap.xml')}</loc>
            <lastmod>${new Date().toISOString()}</lastmod>
        </sitemap>
        <sitemap>
            <loc>${fullUrl('/rest-sitemap.xml')}</loc>
            <lastmod>${new Date().toISOString()}</lastmod>
        </sitemap>
    </sitemapindex>
    `

  writeFileSync(`public/sitemap.xml`, indexSitemapStr)
}

generateSitemap()

This code will produce multiple sitemap files in the public folder of your project. You can create as many sitemaps as you want by creating multiple globby configurations and writing multiple sitemap files in the public folder.

Note: Include all the sitemaps in the robots.txt file, so that search engines can find all the sitemaps.

Step 4: Add the following script in your `package.json`

"scripts": {
    "build": "next build",
    "postbuild": "node ./scripts/generate-sitemap.mjs"
}

Step 5: Run the build command

npm run build

Step 6: Check the sitemap.xml file in the public folder of your project

| app
    | /pages
    | /public
        | /sitemap.xml
        | /product-sitemap.xml // if you created multiple sitemaps
        | /rest-sitemap.xml // if you created multiple sitemaps

on successful build, you will see a sitemap.xml file in the public folder of your project. If you created multiple sitemaps, you will see multiple sitemap files in the public folder.

Conclusion

With this approach, you can create a fully customized sitemap for your website in NextJS. You can create multiple sitemaps with specific requirements like each year/folder/collection etc will have its own sitemap, exclude some pages from the sitemap, add custom priority, changefreq, and lastmod for each page, add custom tags for each page, and many more.

But what if you have a dynamic website and data changes frequently? In the next blog, I will explain how you can extend this approach to create a include dynamic data in the sitemap.

Till then, Happy Coding 🚀

Get in touch

Platform	Handle
Youtube	@thesohailjafri
X/Twitter	@thesohailjafri
LinkedIn	@thesohailjafri
Instagram	@thesohailjafri
Github	@thesohailjafri

Boost Your Side Project Traffic By Adding a simple Sitemap!

Sohail SJ | TheZenLabs — Tue, 10 Dec 2024 09:35:30 +0000

How to Create Sitemap in NextJS using package next-sitemap

Sohail SJ | TheZenLabs ・ Dec 9 '24

#nextjs #sitemap #seo #javascript

How to Create Sitemap in NextJS using package next-sitemap

Sohail SJ | TheZenLabs — Mon, 09 Dec 2024 17:45:58 +0000

I last wrote about how to create a sitemap for a website in your NextJS project. In this blog, I will explain how you can automate the process of creating a sitemap using the next-sitemap package.

In previous blog, we created a sitemap manually by writing the XML code for the sitemap. But this article will focus on automating the process of creating a sitemap.

Link to the previous blog: Create Sitemaps in NextJS in 2mins

About `next-sitemap` NPM Package📦

next-sitemap is a package created and maintained by Vishnu Sankar and its the most popular package for generating sitemaps in NextJS with over 3.4k stars on GitHub.

Purpose of this package is fairly simple, but very important if you are looking to improve the SEO of your website. check below the self defined purpose of the package.

Sitemap generator for next.js. Generate sitemap(s) and robots.txt for all static/pre-rendered/dynamic/server-side pages.

Lets get started🚀
- Step 1: Install the package
- Step 2: Create config file
- Step 3: Configure your package.json
- Step 4: Run the build
- Step 5: Check the results
Pro Developer Configurations😎
Conclusion
Get in touch

Lets get started🚀

Step 1: Install the package

npm install next-sitemap

Step 2: Create a `next-sitemap.config.js` file in the root of your project

Keep name of the file next-sitemap.config.js as it is, otherwise it will not work.

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}

Step 3: Add the following script in your `package.json`

"scripts": {
  "build": "next build",
  "postbuild": "next-sitemap"
}

Caution: When using pnpm you need to create a .npmrc file in the root of your project if you want to use a postbuild step or else you just need define build as build: "next build && next-sitemap", clear lets move on.

Step 4: Run the build command

npm run build

Step 5: Check the sitemap.xml file in the root of your project

| app
    | /pages
    | /public
        | /sitemap.xml
        | /robots.txt

on successful build, you will see a sitemap.xml and robots.txt file in the root of your project. If you dont want robots.txt file, you can set generateRobotsTxt: false in the next-sitemap.config.js file. If you allow me I would like to explain customization can do with sitemap.xml with config file.

Pro Developer Configurations😎

Welcome to the pro developer configurations, where you can customize the sitemap.xml file as per your requirements. Kudos for making it this far, lets get started.

How to url configuration in sitemap.xml

By default, the package will assign same priority to all pages, but I want priority of home page to be 1.0 and other pages to be 0.8. I can do that by adding the following code in the next-sitemap.config.js file.

module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  changefreq: 'daily',
  // here is the new code
  priority: 0.8,
  sitemapSize: 5000,
  generateRobotsTxt: true,
  transform: async (config, path) => {
    let priority = config.priority
    let changefreq = config.changefreq
    // Set higher priority for home and team pages
    if (path === '/') {
      priority = 1.0 // Highest priority for the homepage
      changefreq = 'hourly' // Change frequency for the homepage, hourly is just an example consult the sitemap documentation or your SEO expert
    }

    return {
      loc: path, // => this will be exported as http(s)://<config.siteUrl>/<path>
      changefreq: config.changefreq,
      priority: priority, // Dynamic priority based on the page
      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
      alternateRefs: config.alternateRefs ?? [],
    }
  },
}

How to exclude pages from sitemap.xml

For example on ChakraFramer website, I dont want to include the /blank/* like this in the sitemap.xml file. I can do that by adding the following code in the next-sitemap.config.js file.

module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  changefreq: 'daily',
  priority: 0.8,
  sitemapSize: 5000,
  generateRobotsTxt: true,
  transform: async (config, path) => {
    let priority = config.priority
    let changefreq = config.changefreq
    // Set higher priority for home and team pages
    if (path === '/') {
      priority = 1.0 // Highest priority for the homepage
      changefreq = 'hourly' // Change frequency for the homepage, hourly is just an example consult the sitemap documentation or your SEO expert
    }

    return {
      loc: path, // => this will be exported as http(s)://<config.siteUrl>/<path>
      changefreq: config.changefreq,
      priority: priority, // Dynamic priority based on the page
      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
      alternateRefs: config.alternateRefs ?? [],
    }
  },
  // here is the new code
  exclude: ['/blank/*'],
}

Full Configuration Options

If you do like to see all the configuration options, you can check the official documentation

Conclusion

In this blog, I explained how to automate the process of creating a sitemap using the next-sitemap package. I also explained how to customize the sitemap.xml file as per your requirements. I hope you found this blog helpful. But if next-sitemap does not allow you to customization you need, you can always create the sitemap manually as explained in the previous blog or my next blog on custom postbuild script.

Get in touch

Platform	Handle
Youtube	@thesohailjafri
X/Twitter	@thesohailjafri
LinkedIn	@thesohailjafri
Instagram	@thesohailjafri
Github	@thesohailjafri

Struggling with Website Traffic? Learn How to Create Sitemaps in NextJS Today!

Sohail SJ | TheZenLabs — Sun, 08 Dec 2024 00:30:00 +0000

I used to think that once you make website connect a domain and you are done, after a few weeks your site will get massive traffic and I will be rich by AdSense.

But that's not the case, you need to do a lot of things to get traffic to your website and one of the most important thing is SEO. And one of the most important part of SEO is sitemap.

So in this series, I will try to explain how to create sitemap for a website in your NextJS project. I will explain different approaches based on your requirements like static pages, dynamic pages, etc.

What is sitemap?
Why do you need a sitemap?
How to create sitemap using NextJS?
- For NextJS Page Router
- For NextJS App Router
Get in touch

What is sitemap?

A sitemap is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them.

Basically, it is a way to tell search engines about pages on your site they might not otherwise discover like a map with routes to all your pages.

Why do you need a sitemap?

A sitemap is important as it helps search engines to understand your website structure while crawling it which results in better indexing of your website and better indexing means better ranking in search results and better ranking means more traffic to your website. Simple, right?

If sitemap is not provided, search engines will still crawl your website but it might take longer time to index your website and some pages might not be indexed at all.

You can also share this important XML file to google search console to monitor the indexing status of your website and to see if there are any errors. Check example below for ChakraFramer website.

How to create sitemap using NextJS?

To keep things simple, I will be creating a sitemap for general structure of a website like home, about, contact, etc.

| app/pages
    | /
    | /about
    | /contact
    | /sitemap.xml

For NextJS Page Router

Create a new folder sitemap.xml with a index.js file and add the following code if you using pages router in NextJS.
We will be using getServerSideProps to generate the sitemap.
Then we will cache the sitemap for a certain period of time to avoid generating it on every request.
View Code on Stackblitz

const CACHE_DURATION = 60 * 60 * 24 // 24 hours in seconds
const LAST_MODIFIED = new Date().toUTCString()
export const getServerSideProps = async ({ res }) => {
  const sitemap = `
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        <url>
          <loc>https://example.com/</loc>
          <lastmod>2021-09-01</lastmod>
          <changefreq>daily</changefreq>
          <priority>1.0</priority>
        </url>
        <url>
          <loc>https://example.com/about</loc>
          <lastmod>2021-09-01</lastmod>
          <changefreq>daily</changefreq>
          <priority>0.8</priority>
        </url>
        <url>
          <loc>https://example.com/contact</loc>
          <lastmod>2021-09-01</lastmod>
          <changefreq>daily</changefreq>
          <priority>0.8</priority>
        </url>
  </urlset>
    `
  res.setHeader('Content-Type', 'text/xml')
  res.setHeader('Cache-Control', `public, max-age=${CACHE_DURATION}`) // Cache for 24 hours
  res.setHeader('Last-Modified', LAST_MODIFIED)
  res.write(`<?xml version="1.0" encoding="UTF-8"?>`)
  res.end(sitemap) // Send the sitemap to the user
  return {
    props: {},
  }
}
const Sitemap = () => {
  return null // Return null as we are not rendering anything its just a server side code
}
export default Sitemap

For NextJS App Router

Create a new folder in app folder sitemap.xml with a route.js file and add the following code if you using app router in NextJS.
We will be using GET request to send the sitemap.
Then we will cache the sitemap for a certain period of time to avoid generating it on every request.
View Code on Stackblitz

const CACHE_DURATION = 60 * 60 * 24 // 24 hours in seconds
const LAST_MODIFIED = new Date().toUTCString()
export async function GET(req: Request) {
  const sitemap = `
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
                <url>
                    <loc>https://example.com/</loc>
                    <lastmod>2021-09-01</lastmod>
                    <changefreq>daily</changefreq>
                    <priority>1.0</priority>
                </url>
                <url>
                    <loc>https://example.com/about</loc>
                    <lastmod>2021-09-01</lastmod>
                    <changefreq>daily</changefreq>
                    <priority>0.8</priority>
                </url>
                <url>
                    <loc>https://example.com/contact</loc>
                    <lastmod>2021-09-01</lastmod>
                    <changefreq>daily</changefreq>
                    <priority>0.8</priority>
                </url>
    </urlset>
    `

  return new Response(sitemap, {
    status: 200,
    headers: {
      'Content-Type': 'text/xml',
      'Cache-Control': `public, max-age=${CACHE_DURATION}`, // Cache for 24 hours
      'Lats-Modified': LAST_MODIFIED,
    },
  })
}

Now, if you visit https://example.com/sitemap.xml or http://localhost:3000/sitemap.xml it will look like image below.

In the next part, I will explain how to create sitemap for using npm package next-sitemap. which eleminates the need to write the sitemap manually. automatically generates the sitemap for you. Stay tuned!

Get in touch

Platform	Handle
Youtube	@thesohailjafri
X/Twitter	@thesohailjafri
LinkedIn	@thesohailjafri
Instagram	@thesohailjafri
Github	@thesohailjafri

I never imagined that setting up authentication could be this easy and fast!

Sohail SJ | TheZenLabs — Fri, 29 Nov 2024 15:17:06 +0000

Simplifying Authentication in React Applications with Clerk

Nana Okamoto ・ Nov 29 '24

#react #clerk #javascript #security

How to handle Burnout, Imposter Syndrome & More | What Junior Devs Really Experience🕵️‍♀️

Sohail SJ | TheZenLabs — Thu, 28 Nov 2024 18:02:14 +0000

Hey there, fellow devs! Moving up from a beginner to a junior developer brings its own unique set of challenges and opportunities for growth.

After experiencing these firsthand and mentoring other juniors, I've compiled the most common hurdles we face at this exciting career stage and how to tackle them head-on.

The Code Review Anxiety😰
The Legacy Code Labyrinth🗺️
The Estimation Enigma⏰
The Production Paranoia🚨
The Scope Creep Struggle🎯
The Documentation Duty📝
The Work-Life Balance War⚖️
The Debugging Dilemma🐞
The Communication Conundrum🗣️
The Knowledge Gap🧠
Bonus. The Imposter Syndrome 🎭
Conclusion
Pro Tips

1. The Code Review Anxiety😰

Opening your first pull request at work feels like presenting your art project to the entire class.

You've triple-checked everything, yet that notification of "25 comments" on your PR still makes your stomach drop like you're on a roller coaster.

How to handle reviews like pro:

Embrace feedback as a learning opportunity
Document your code decisions
Review others' code to learn different perspectives, this is the best way to learn for any junior or senior developer
Ask questions and don't be afraid to ask for clarification and help

Remember, code reviews are not about you - so dont take it personally. They're about improving the codebase and your skills. You'll get better with each review.

2. The Legacy Code Labyrinth🗺️

Onboarding onto new team or project means diving into a maze of code that looks like it was written in a foreign language.

You're not sure where to start, and every change you make feels like a shot in the dark.

How to get to know the codebase:

Start with small, isolated changes/modules
Document what you learn and update outdated documentation (if any)
Use debugging tools to trace code flow and console.log for quick insights
Don't be afraid to ask for context from code maintainers

Remember, every developer was once a newbie to the codebase. Take it one step at a time, and you'll soon find your way through the labyrinth.

3. The Estimation Enigma⏰

Most often, you'll be asked to estimate how long a task will take. And more often than not, you'll be wrong.

Underestimating tasks can lead to missed deadlines, while overestimating can make you look slow.

How to calculate estimates like pro:

Break tasks into smaller chunks (story points)
Add buffer time for unknowns (always add buffer time even if you think you don't need it)
Learn from past estimates
Track your time to improve future estimates

Interesting story I once estimated a project to take 3 months and it took 6 months, and I was so embarrassed but there were so many unknowns and changes in the project that I couldn't have predicted. So it is okay to be wrong, learn from it and move on.

4. The Production Paranoia🚨

Your first production deployment feels like performing surgery - one wrong move and everything flatlines.

I still remember my first deployment, I was so nervous, I was checking the logs every 5 minutes, and I was so scared that I would break something and it did happen, I broke the website, but it was a good learning experience 😅.

How to be better at deployment:

Practice deployment in staging environments (test environments)
Automate deployment processes with CI/CD pipelines (I love GitHub Actions, it is so easy to use)
Monitor logs and metrics for early detection of issues
Have a rollback plan in case things go south
Remember, mistakes happen, and that's how we learn

Deployment anxiety is a common thing for all developers, I still break things in production, and I have been doing this for years so it is normal.

5. The Scope Creep Struggle🎯

What started as a "simple feature" somehow evolved into refactoring half the application. You're not sure how it happened, but now you're knee-deep in requirements that seem to multiply like rabbits.

How to define scope like pro:

Learn to identify red flags
Practice scope definition and management (make those requirements clear)
Communicate concerns early and often
Document requirement changes and their impact

I like to keep a document of all the requirements and changes that happen during the project and email it to the client, so they know what is happening and what is changing, and they can approve it or not.

Mostly I use it as a reference to show the client that they asked for this feature, and it is not included in the original scope, so they need to pay extra for it 😉💰

6. The Documentation Duty📝

Writing documentation feels like doing chores - but deep down, you know it's essential for your future self and your team.

I know, I know documentation is boring, So use below tips to make it less boring and more fun.

How to handle documentation like pro:

Document as you code (I comment a sudo code before the actual code)
Use clear naming conventions (My teammates used to hate it, now they are thankful for it)
Create helpful README files
Use Ai Copilot to write documentation (I use GitHub Copilot)
Write meaningful commit messages

Commit message hacks:

I like to fit commit messages in types FIX, FEAT, DOCS, STYLE, REFACTOR, TEST, CHORE

FIX for bug fixes
FEAT for new features
DOCS for documentation
STYLE for code style changes
REFACTOR for refactoring code
TEST for adding tests
CHORE for updating build tasks, package manager configs, etc.

7. The Work-Life Balance War⚖️

Realizing that "just one more commit" at 9 PM isn't sustainable, but the excitement of solving problems makes it hard to step away.

I have been there, I have worked 12 hours a day, and I have worked on weekends, and it is not worth it if it affects your sleep cycle or health or relationships.

I totally understand the excitement of solving a problem, finding a bug, or implementing a new feature, but you need to take care of yourself, and you need to have a life outside of coding.

How to handle work-life balance like pro:

Set clear work boundaries
Take regular breaks and stretch or take a walk
Practice time management techniques
Maintain hobbies outside coding
Remember, you're more than your code you are a human not a robot, So kick back, relax, and enjoy your life.

I personally like to go for a walk, ride a bicycle, or if mood strikes take my motorcycle for a spin 🏍️.

8. The Debugging Dilemma🐞

Debugging complex issues can feel like trying to find a needle in a haystack, especially when you're still learning the codebase.

How to handle debug like pro:

Develop a systematic debugging process
Utilize logging and monitoring tools
Break down problems into smaller steps
Don't be afraid to ask for help

Debugging is like detective work - it requires patience, attention to detail, and a methodical approach. You'll get better with practice. If you web dev check these console log techniques to debug faster.

9. The Communication Conundrum🗣️

Transitioning from solo projects to working in a team can be daunting, as you navigate different communication styles and workflows.

How to communicate like pro:

Practice active listening
Seek feedback from teammates
Contribute to team discussions and decisions (even if you are wrong, it is okay)
Sometimes just talk about anything other than work, it helps to build a relationship with your teammates

Communication is a two-way street, and the more you practice, the better you'll get at it.

10. The Knowledge Gap🧠

Feeling like you're constantly playing catch-up as new technologies and best practices emerge can be overwhelming.

How to manage knowledge gap like pro:

Identify areas for improvement
Allocate time for continuous learning
Attend conferences and meetups
Find a mentor to guide your growth

The more you learn, the more you realize how much you don't know 😹

Bonus. The Imposter Syndrome 🎭

Even as a senior developer, you may still experience self-doubt and feel like you don't belong.

How to overcome imposter syndrome:

Celebrate your small wins
Remind yourself of your progress
Share your knowledge with others
Surround yourself with supportive peers

Imposter syndrome is common among high achievers, and it's a sign that you care about your work and want to do your best. Cheers to that!

I do have imposter syndrome when it comes to ui design, people say I am good at it, but I feel like I am not good enough, but I keep learning and improving thats why I created Chakra Framer ui kit based on chakra ui and framer motion to improve my design skills.

Conclusion

The junior developer phase is like learning to drive - you know the basics, but real-world traffic is a different game altogether. Remember that every senior developer went through these same challenges. Your growth during this phase sets the foundation for your entire career.

Pro Tips:

Find a mentor
Build your professional network (I prefer Twitter/X over LinkedIn)
Keep learning consistently (Watch random video from fireship.io or Traversy Media)
Document your achievements (on GitHub, personal blog or on Twitter)
Practice self-advocacy

Remember, being a junior developer isn't about knowing everything - it's about knowing how to find answers and grow from challenges. Your fresh perspective and eagerness to learn are valuable assets to any team.

Get In Touch

thesohailjafri (Sohail Jafri) · GitHub

He is likely optimizing his old code, even though no one has requested it. - thesohailjafri

github.com

Platform	Handle
Youtube	@thesohailjafri
X/Twitter	@thesohailjafri
LinkedIn	@thesohailjafri
Instagram	@thesohailjafri
Github	@thesohailjafri