DEV Community: javediqbal8381

Annotation Tool

javediqbal8381 — Tue, 02 Dec 2025 19:15:33 +0000

If you ever need to quickly point out bugs, highlight sections, or add notes to an image — try this simple Image Annotation Tool!
You can take a screenshot directly, upload an image from your computer, or even paste a URL. Super easy and super handy 🎯

Give it a try: https://www.justinbrowser.com/tools/image-annotator

Stay Updated with the Latest Tech News 📰

javediqbal8381 — Wed, 05 Nov 2025 12:07:49 +0000

I’ve added a new page where you can find the latest updates from the tech world.

If you love keeping up with new technologies, trends, and innovations, this page brings it all together in one place.

Check it out here justinbrowser news

🎨 Build Layouts Visually in Seconds — Meet the Layout Builder by JustinBrowser

javediqbal8381 — Fri, 24 Oct 2025 09:43:00 +0000

Have you ever wished you could design layouts by just drawing boxes — and instantly get the JSX + Tailwind or HTML + CSS code?
Now you can. 🚀

👉 Try it here: Layout Builder

Understanding Chrome Extensions: A Developer's Guide to Manifest V3

javediqbal8381 — Wed, 22 Oct 2025 09:10:33 +0000

Understanding Chrome Extensions: A Developer's Guide to Manifest V3

Chrome extensions have become essential tools that enhance browser functionality for millions of users worldwide. As a developer, understanding how they work under the hood is crucial for building powerful, secure, and performant extensions. In this comprehensive guide, we'll dive deep into Chrome extension architecture, the Manifest V3 specification, and everything you need to know to publish your extension.

🏗️ Extension Architecture: The Core Components

Every Chrome extension is built from several key components that work together seamlessly:

1. Manifest File (manifest.json)

The manifest is the blueprint of your extension - a JSON configuration file that must reside in the root directory. It's the first thing Chrome reads and contains metadata, permissions, and component declarations.

Required fields:

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0"
}

Common additional fields:

{
  "manifest_version": 3,
  "name": "My Awesome Extension",
  "version": "1.0.0",
  "description": "A brief description of what your extension does",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icons/icon48.png",
    "default_title": "Click me!"
  },
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": ["https://*/*", "http://*/*"],
      "js": ["content.js"],
      "css": ["styles.css"]
    }
  ],
  "permissions": [
    "storage",
    "tabs",
    "activeTab"
  ],
  "host_permissions": [
    "https://api.example.com/*"
  ]
}

2. Service Worker (Background Script)

In Manifest V3, the persistent background page has been replaced with service workers. This is a major architectural change designed to improve performance and security.

Key characteristics:

Runs in the background only when needed (event-driven)
No access to the DOM
Automatically terminates after 30 seconds of inactivity
Restarts when an event is triggered

Example service worker:

// background.js
chrome.runtime.onInstalled.addListener(() => {
  console.log('Extension installed');
  chrome.storage.local.set({ initialized: true });
});

// Listen for tab updates
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete') {
    console.log('Tab loaded:', tab.url);
  }
});

// Listen for messages
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'getData') {
    // Process data
    sendResponse({ data: 'Response from background' });
  }
  return true; // Required for async sendResponse
});

3. Content Scripts

Content scripts run in the context of web pages and can interact with the DOM. They're injected into pages matching patterns defined in the manifest.

Two ways to inject content scripts:

Declarative (via manifest):

{
  "content_scripts": [
    {
      "matches": ["https://github.com/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ]
}

Programmatic (via scripting API):

// In service worker
chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ['content.js']
  });
});

// Or inject a function
function injectedFunction() {
  document.body.style.backgroundColor = 'lightblue';
}

chrome.scripting.executeScript({
  target: { tabId: tab.id },
  func: injectedFunction
});

4. Popup / Action UI

The popup is an HTML page that appears when users click your extension icon in the toolbar.

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 300px; padding: 10px; }
  </style>
</head>
<body>
  <h1>My Extension</h1>
  <button id="actionBtn">Do Something</button>
  <script src="popup.js"></script>
</body>
</html>

// popup.js
document.getElementById('actionBtn').addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  chrome.tabs.sendMessage(tab.id, {
    action: 'performAction'
  }, (response) => {
    console.log('Response:', response);
  });
});

📡 Communication Patterns

One of the most critical aspects of extension development is understanding how different components communicate with each other.

1. One-time Messages

From content script to service worker:

// content.js
chrome.runtime.sendMessage(
  { greeting: 'hello', data: 'some data' },
  (response) => {
    console.log('Response:', response);
  }
);

From service worker to content script:

// background.js
chrome.tabs.sendMessage(
  tabId,
  { action: 'updateUI', data: 'new data' },
  (response) => {
    console.log('Response:', response);
  }
);

From popup to service worker:

// popup.js
chrome.runtime.sendMessage(
  { request: 'getData' },
  (response) => {
    console.log('Data:', response.data);
  }
);

2. Long-lived Connections

For multiple messages between components, use ports:

// content.js
const port = chrome.runtime.connect({ name: 'my-channel' });

port.postMessage({ type: 'init' });

port.onMessage.addListener((msg) => {
  console.log('Received:', msg);
});

// background.js
chrome.runtime.onConnect.addListener((port) => {
  console.log('Connected:', port.name);

  port.onMessage.addListener((msg) => {
    console.log('Message received:', msg);
    port.postMessage({ response: 'acknowledged' });
  });
});

3. Communication with Web Pages

Content scripts and web pages share the DOM but have isolated JavaScript contexts. Use window.postMessage:

// content.js
window.addEventListener('message', (event) => {
  if (event.source !== window) return;

  if (event.data.type === 'FROM_PAGE') {
    console.log('Message from page:', event.data.text);
    // Forward to service worker if needed
    chrome.runtime.sendMessage(event.data);
  }
});

// webpage.js
window.postMessage(
  { type: 'FROM_PAGE', text: 'Hello from webpage!' },
  '*'
);

🔐 Permissions System

Permissions in Manifest V3 are more granular and security-focused. There are four types:

1. Regular Permissions

API permissions that don't require host access:

{
  "permissions": [
    "storage",        // chrome.storage API
    "tabs",          // Limited tabs API access
    "activeTab",     // Access to active tab (requires user gesture)
    "contextMenus",  // Create context menu items
    "notifications", // Show notifications
    "scripting"      // Execute scripts programmatically
  ]
}

2. Host Permissions

Access to specific URLs or patterns:

{
  "host_permissions": [
    "https://api.example.com/*",
    "https://*.google.com/*",
    "<all_urls>"  // Access to all URLs (use sparingly!)
  ]
}

3. Optional Permissions

Requested at runtime rather than install time:

{
  "optional_permissions": ["downloads", "bookmarks"],
  "optional_host_permissions": ["https://*/*"]
}

Request them in your code:

document.getElementById('enableFeature').addEventListener('click', async () => {
  const granted = await chrome.permissions.request({
    permissions: ['downloads'],
    origins: ['https://example.com/*']
  });

  if (granted) {
    console.log('Permission granted!');
  }
});

4. Content Script Matches

Separate from host_permissions - controls where content scripts inject:

{
  "content_scripts": [
    {
      "matches": ["https://github.com/*"],
      "js": ["content.js"]
    }
  ]
}

⚡ Manifest V3 Key Changes

If you're migrating from V2 or starting fresh, here are the critical changes:

Background Pages → Service Workers

// ❌ Manifest V2
{
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

// ✅ Manifest V3
{
  "background": {
    "service_worker": "background.js",
    "type": "module"  // Optional: enables ES modules
  }
}

Host Permissions Separation

// ❌ Manifest V2
{
  "permissions": [
    "tabs",
    "https://*/*"
  ]
}

// ✅ Manifest V3
{
  "permissions": ["tabs"],
  "host_permissions": ["https://*/*"]
}

executeScript Migration

// ❌ Manifest V2
chrome.tabs.executeScript(tabId, {
  code: 'document.body.style.backgroundColor = "red"'
});

// ✅ Manifest V3
chrome.scripting.executeScript({
  target: { tabId: tabId },
  func: () => {
    document.body.style.backgroundColor = "red";
  }
});

webRequest → declarativeNetRequest

For content blocking and request modification:

{
  "permissions": ["declarativeNetRequest"],
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

No Remote Code

All code must be bundled with the extension. External scripts from CDNs are no longer allowed for security reasons.

📦 What You Can Do Without Permissions

Some Chrome APIs don't require permissions:

chrome.runtime (messaging, extension info)
chrome.i18n (internationalization)
chrome.action (basic toolbar icon interaction)
window and document APIs in content scripts
Standard web APIs (fetch, localStorage in content scripts)

🚀 Publishing to Chrome Web Store

Step 1: Prepare Your Extension

Test thoroughly - Load unpacked in chrome://extensions/
Create assets:
- 128x128 icon (required)
- 440x280 or 920x680 screenshots (required)
- 1280x800 promotional image (optional)
- Privacy policy (if handling user data)
Package your extension:

   # Create a zip file with manifest.json at root
   zip -r extension.zip . -x "*.git*" "node_modules/*" ".DS_Store"

Step 2: Register as Developer

Go to Chrome Web Store Developer Dashboard
Pay $5 one-time registration fee
Enable 2-factor authentication (required as of 2024)

Step 3: Upload Extension

Click "New Item"
Upload your zip file
Fill out the Store Listing:
- Description - Clear explanation of functionality
- Category - Choose appropriate category
- Language - Target language(s)
- Screenshots - At least 1, up to 5
Privacy Tab:
- Single Purpose - Declare extension's purpose
- Permission Justifications - Explain why each permission is needed
- Data Usage - Disclose any data collection
Distribution Tab:
- Visibility - Public, Unlisted, or Private
- Regions - Select target countries
- Pricing - Free or paid

Step 4: Submit for Review

Review times vary but most extensions are reviewed within 3 days. You'll receive an email notification once reviewed.

Publishing Options:

Public: Available to everyone in Chrome Web Store
Unlisted: Only accessible via direct link
Private: Only for users in your domain/organization

Step 5: Update Your Extension

To publish updates:

Increment version number in manifest.json
Upload new zip file
Submit for review
Can use percentage rollout to gradually release to users

Programmatic Publishing (CI/CD)

You can automate publishing using the Chrome Web Store API:

// Using chrome-webstore-upload npm package
import chromeWebstoreUpload from 'chrome-webstore-upload';

const store = chromeWebstoreUpload({
  extensionId: 'your-extension-id',
  clientId: process.env.CLIENT_ID,
  clientSecret: process.env.CLIENT_SECRET,
  refreshToken: process.env.REFRESH_TOKEN
});

const myZipFile = fs.createReadStream('./extension.zip');
await store.uploadExisting(myZipFile);
await store.publish();

🛠️ Development Tips & Best Practices

Use ES Modules - Set "type": "module" in background config
Handle Service Worker Lifecycle - Store state in chrome.storage, not variables
Minimize Permissions - Only request what you absolutely need
Test on Multiple Chrome Versions - Use beta/dev channels
Monitor Performance - Service workers should be lightweight
Implement Error Handling - Always check chrome.runtime.lastError
Use Promises - Modern Chrome APIs support promises in the chrome.* namespace

// Modern promise-based approach
const tabs = await chrome.tabs.query({ active: true });
const result = await chrome.storage.local.get('key');

🎯 Common Pitfalls to Avoid

❌ Using localStorage in service workers (not available)
❌ Assuming service worker stays alive indefinitely
❌ Not returning true from onMessage listener for async responses
❌ Requesting <all_urls> without justification
❌ Including unnecessary files in your package
❌ Not handling permission denials gracefully
❌ Using eval() or inline scripts (CSP violation)

🎬 Conclusion

Chrome extensions are powerful tools that can significantly enhance user experience. With Manifest V3, Google has made extensions more secure, performant, and privacy-focused. While the migration from V2 requires some changes, the improved architecture leads to better extensions overall.

📚 Resources

About Me: I've developed multiple complex Chrome extensions over the years, ranging from productivity tools to advanced web automation solutions. Through this journey, I've learned the intricacies of extension architecture, performance optimization, and the evolving Chrome extension ecosystem. If you have questions about Chrome extension development, feel free to reach out!

My site >> https://justinbrowser.com/

Happy coding! 🚀

Simplifying API Testing — Why Sometimes You Don’t Need Postman

javediqbal8381 — Wed, 22 Oct 2025 04:57:14 +0000

API testing is one of the most important, and often repetitive, parts of a developer’s workflow. Whether you’re building a backend, connecting third-party services, or debugging endpoints, being able to test APIs quickly and efficiently can save you a lot of time and frustration.

You know, Most of us reach for Postman, and for good reason: it’s powerful, feature-rich, and great for teams.
But sometimes, all you need is something simpler, something that just works instantly.

🧩 The Problem with Heavy Tools

There are days when I just want to test an endpoint quickly:

POST https://api.example.com/users

…but opening Postman or Insomnia feels like loading a full IDE just to print “Hello World.”
These tools are excellent for serious workflows, but for small tests, they can feel too heavy.

So, I built something that scratches this exact itch — a lightweight, browser-based API Tester.

⚙️ Introducing: API Tester Tool

What it is:
A browser-based REST API testing tool that lets you send HTTP requests and view responses directly — no installs, no setup.

You open it, type your endpoint, and hit send. That’s it.

🔑 Key Features

Supports all HTTP methods: GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS.
Custom headers configuration: Add headers in JSON format
Request body builder: Easily test POST/PUT/PATCH requests with JSON.
Real-time response analysis: Auto-formats JSON responses.
Color-coded status indicators: Instantly see success, redirects, or errors.
Response time tracking: Get quick performance insights.
Request history: Keeps your last 10 requests (with one-click replay).
Copy or download responses: For quick debugging or sharing.

🆚 Why Use It Over Postman (Sometimes)

Let’s be honest — this isn’t a Postman killer.
It’s a fast companion for those quick moments when you just want to check something fast.

🎯 Use Case Examples

Checking your backend endpoints in a hurry.
Debugging during frontend API integration.
Testing APIs on a new environment quickly.
Teaching or demonstrating APIs without installing software.

🌐 Try It Yourself

You can try the API Tester Tool right now in your browser — no account, no setup, no download.

👉 Open API Tester Tool

Image Related Tools All in one place

javediqbal8381 — Tue, 30 Sep 2025 19:50:30 +0000

I’ve put all the image-related tools together in one place. Check them out at justinbrowser, you will love it.

🗜️ Image Compressor – Compress JPG, PNG, WebP
✂️ Image Cropper – Crop with aspect ratios
📐 Image Resizer – Resize or batch resize
🖊️ Image Annotator – Add arrows, shapes & text
🎨 Color Palette Extractor – Get hex codes from images

Simple Image Resizer Tool

javediqbal8381 — Fri, 19 Sep 2025 18:08:52 +0000

Need to resize your images quick? This image resizer makes it super easy.

How it works
Upload >> Just upload your images. Works with JPG, PNG, WebP, and even GIFs.

Resize >> Choose the size you want in pixels, scale by percentage, or use ready-made presets. You can also keep the aspect ratio so things don’t look stretched.

Download >> Grab your images one by one or all together in a ZIP. They stay high quality and keep their original names.

Handy Presets

Instagram Post: 1080×1080
Instagram Story: 1080×1920
YouTube Thumbnail: 1280×720
Twitter Banner: 1500×500
LinkedIn Banner: 1584×396
Facebook Cover: 820×312
720p, 1080p, 2K, 4K screen sizes

That’s it. Upload → Resize → Download. Fast, simple, no fuss.

Try it out in justinbrowser > https://www.justinbrowser.com/tools/image-resizer

5 Metrics Every SaaS Business Should Track

javediqbal8381 — Wed, 17 Sep 2025 05:37:26 +0000

To scale effectively, monitor these:

Customer Acquisition Cost (CAC) – The average cost of acquiring a new customer, including marketing, sales, and onboarding expenses. Lower CAC means more efficient growth.
Customer Lifetime Value (CLV) – The total revenue a business can expect from a customer throughout their relationship. A higher CLV compared to CAC indicates strong profitability.
Monthly Recurring Revenue (MRR) – Predictable monthly income from subscriptions or contracts. It’s a key metric for measuring SaaS growth and stability.
Churn Rate – The percentage of customers or revenue lost over a period. A high churn rate signals customer dissatisfaction or poor retention.
Net Promoter Score (NPS) – A measure of customer loyalty based on their likelihood to recommend your product. Higher NPS reflects better satisfaction and stronger word-of-mouth growth.

Which KPI do you track most closely?

Mastering Regular Expressions with the Regex Tester Tool

javediqbal8381 — Tue, 16 Sep 2025 13:38:37 +0000

If you have ever worked with text processing, validation, or search patterns, chances are you have come across regular expressions (regex). They are incredibly powerful but often intimidating, especially when debugging complex patterns.

That is where the Regex Tester at justinbrowser
comes in. It is a clean, efficient, and developer-focused tool designed to make working with regex faster, easier, and more reliable.

Why Regex Testing Matters

Regular expressions are used everywhere:
Validating email addresses or phone numbers
Extracting data from logs
Searching text in editors and IDEs
Defining parsing rules for scripts and automation

But the tricky part is getting the pattern right. A small mistake in a regex can lead to mismatched results or even missed data entirely. Having a tool that shows real-time feedback can save hours of trial and error.

Key Features of Regex Tester

✅ Real-Time Pattern Testing
Type your regex and instantly see which parts of your input match. No waiting, no guesswork.
✅ Match Highlighting
Matched strings are highlighted, making it easy to spot exactly what’s being captured.
✅ Common Patterns Library
From email validation to date formats, you can quickly grab and test popular regex snippets.
✅ Group Capturing
Visualize capture groups to understand how your regex is breaking down text.
✅ Pattern Validation
Ensure your regex is syntactically correct before putting it into production code.

Who Is It For?

Developers fine-tuning search or validation logic.
Data analysts parsing logs or extracting structured information.
Students and learners practicing regex syntax with immediate feedback.
Automation engineers writing parsing rules for scripts and pipelines.

Pro Tips for Using Regex Tester

Test with varied input – Don’t just test with “happy path” data; include edge cases.
Use capture groups wisely – They’re powerful for extracting structured data.
Validate with examples – Run the regex against multiple strings to ensure it works universally.
Save common patterns – The built-in library helps, but you can also maintain your own snippets.

Final Thoughts

Regex doesn’t have to be scary. With the Regex Tester on justinbrowser.com, you can experiment, debug, and perfect your patterns with confidence. Whether you’re building data extraction rules, validating input fields, or parsing complex text, this tool helps you see exactly what’s happening in real time.

👉 Try it out today at justinbrowser
.

The Best Free, Fast, simple Online API Testing Tool for Developers and QA Engineers

javediqbal8381 — Thu, 11 Sep 2025 15:17:37 +0000

If you’re building APIs, debugging integrations, or validating endpoints, you know how important a fast and reliable testing tool is. That’s why I built another simple tool in JustinBrowser, which can save your time if you need some quick API testing.

A powerful, browser-based API testing tool that helps developers and QA engineers test RESTful APIs instantly.

Unlike bulky desktop apps, API Tester runs directly in your browser — no downloads, no sign-ups, no hidden costs. Just open the tool and start testing your APIs in seconds.

Why Use this API Request Tester Instead of Postman or Other Tools?

Many developers rely on Postman or heavy desktop apps for API testing. But if you need something fast, lightweight, and private, API Tester is the perfect alternative:

100% browser-based (no installation required).
Free to use with no hidden limitations.
No account required — start testing right away.
Built for speed, simplicity, and privacy.

With these features, API Tester is an ideal choice for developers, testers, freelancers, and QA teams who want an easy-to-use Postman alternative.

Key Features of API Tester

✅ Support for all HTTP methods (GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS)
✅ Custom headers & authentication tokens (e.g., JWT, Bearer tokens)
✅ JSON request body builder for sending raw data
✅ Real-time response analysis with formatted output
✅ Color-coded status codes (2xx, 4xx, 5xx) for quick debugging
✅ Response time tracking to check API performance
✅ Request history with one-click replay
✅ Copy & download response data
✅ Automatic JSON formatting for better readability

🛠 Best Practices for Using API Tester

Start simple – test your API with a GET request to ensure it’s live.
Use headers – add Content-Type or Authorization headers to test protected APIs.
Track performance – use response time data to spot slow endpoints.
Debug faster – reproduce test cases with one-click history replay.
Test error handling – try invalid requests to see how your API responds.

🔒 Security & Privacy First

Your API requests stay 100% private. API Tester processes everything in your browser — no servers, no logs, no tracking. This makes it safe to test APIs with authentication tokens, private endpoints, and sensitive data.

💡 Who Should Use API Tester?

Developers – for building and debugging APIs quickly.
QA Engineers – for validating API responses during testing.
Freelancers – for client projects without installing heavy tools.
Students & Learners – for practicing RESTful API testing online.
If you’re looking for a free Postman alternative or a lightweight API testing tool, API Tester is built for you.

🚀 Try API Tester Now

👉 Use API Tester Free on justinbrowser.com

There are also other simple, amazing tools in JustInBrowser you can check out. I am actively working on adding more amazing time-saving tools. Let me know if you have some best in mind, I will also work on them.

POV: If you find any bugs, let me know, and I will fix them.

Why Image Compression Matters for Faster & Smarter Web Apps

javediqbal8381 — Tue, 09 Sep 2025 09:15:36 +0000

In today’s world, performance is everything. Users don’t wait around for slow-loading apps or websites. If your web app takes more than a few seconds to load, you risk losing visitors and customers.

One of the biggest culprits of slow apps and websites is uncompressed images.

📸 Why Image Compression Is Needed

Images often take up more than 70% of a webpage’s weight. High resolution pictures are beautiful, but they:

Increase page load time
Consume more storage space
Lead to higher bandwidth costs
Slow down your app on mobile devices with weaker connections

That’s why developers and businesses use image compression — to reduce file size without sacrificing quality.

How Image Compression Helps Your App

Faster load times → Smaller image files mean your users can access content instantly.
Better SEO ranking → Google and other search engines love fast, lightweight apps.
Storage efficiency → Save server or device space by reducing image size.
Improved user experience → Users stay engaged when apps feel smooth and responsive.

In short, image compression = speed, performance, and efficiency.

🛠️ Try a Free Image Compressor (Client-Side & Privacy-First)

If you’re looking for a simple, fast, and secure way to compress images, check out the Image Compressor tool by justInBrowser.

Here’s why developers love it:

100% client-side → Your images are processed in your browser, never uploaded to a server.

Privacy-first → No tracking, no hidden uploads — your files stay on your device.

Super fast → Built for modern browsers, giving you instant compression.

Free & easy → No signup, no ads, just drop your images and compress.

Perfect for web developers, designers, and anyone who wants to make apps faster, save space, and protect user privacy.

👉 Try it now: https://www.justinbrowser.com/tools/image-compressor

SEO for Next.js apps — practical tips that actually work

javediqbal8381 — Sun, 07 Sep 2025 06:54:14 +0000

Most

SEO posts rehash the same basics. This one is for developers who already know the basics and want practical Next.js-specific tactics that you can apply today to get better indexing, prettier link previews, and faster real-user experience.

1) Use the Metadata API (app router) — per page, correctly

If you use the app router, export metadata or generateMetadata from the page/layout. It’s the cleanest way to keep titles, descriptions, canonical links, open graph and favicons consistent per route. When metadata is rendered server side, crawlers and social previews see the right content immediately.

Example (Static):

// app/blog/[slug]/page.js

export const metadata = {
  title: 'How to optimize a blog post',
  description: 'Practical SEO tips for Next.js blog posts',
  alternates: { canonical: 'https://yourdomain.com/blog/my-post' },
  openGraph: {
    title: 'How to optimize a blog post',
    description: 'Practical SEO tips for Next.js',
    images: [{ url: '/og-images/blog-my-post.png', width: 1200, height: 630 }],
  },
}

Example (Dynamic):
// app/blog/[slug]/page.js

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug)
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `https://yourdomain.com/blog/${params.slug}` },
  }
}

2) Own your sitemap and robots with the app router

Sitemaps still matter. Next.js has first-class helpers for sitemaps in the app router so you can generate sitemaps at build time or split them for very large sites. Keep your sitemap up to date and submit it to Search Console after major updates.

Tiny example (app router):

// app/sitemap.ts

import { MetadataRoute } from 'next'
import { getAllSlugs } from './lib/cms'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const slugs = await getAllSlugs()
  return slugs.map(s => ({
    url: `https://yourdomain.com/blog/${s}`,
    lastModified: new Date().toISOString(),
  }))
}

Then submit https://yourdomain.com/sitemap.xml to Google Search Console, or list it in robots.txt.

3) Server-render critical content, avoid client-only for SEO text

Google processes JavaScript in stages: crawl, render, index. If your primary content is rendered only on the client, indexing may be delayed or incomplete. Render key content server side (SSG/SSR/ISR) so crawlers immediately see it. Dynamic rendering exists as a fallback but is not recommended long term.

Quick guideline:

Marketing pages and blog posts: SSG or ISR.
Frequently changing lists (search results): SSR or carefully designed hybrid.
Personalised dashboard UI: client-side is fine (not for SEO).

4) Make images SEO-friendly using next/image

Images affect page speed and visual stability. Use next/image for automatic resizing, modern formats and to avoid layout shift. Always include good alt text and a sensible sizes / priority policy for hero images.

Example:

import Image from 'next/image'

export default function Hero({ post }) {
  return (
    <Image
      src={post.hero}
      alt={post.title}
      width={1200}
      height={630}
      priority
      sizes="(max-width: 768px) 100vw, 1200px"
    />
  )
}

5) Use JSON-LD structured data server side for rich results

JSON-LD still makes it easier for Google to understand your content and can unlock rich snippets like article cards, FAQs, product info and more. Inject JSON-LD from the server so crawlers see it immediately, then validate with Google’s Rich Results Test. Google recommends JSON-LD.

Example (server component):

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": post.title,
  "datePublished": post.publishedAt,
  "author": { "@type": "Person", "name": post.author },
  "image": post.heroFullUrl,
  "publisher": {
    "@type": "Organization",
    "name": "Your Site",
    "logo": { "@type": "ImageObject", "url": "https://yourdomain.com/logo.png" }
  }
}

export default function HeadTags() {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
    </>
  )
}

Out-of-the-box ideas worth trying

Serve simplified content to crawlers with server components — render a minimal SEO-first layer server-side and hydrate interactive bits later.
Split large sitemaps dynamically — for very large sites, break sitemaps by date or category so Search Console processes them faster. Next.js supports splitting sitemaps.
Next.js
Generate OG images at build time or on demand using Next.js image APIs so every post has a unique share image without manual work. (Metadata API can help here.)
Next.js
Use revalidate tags to invalidate groups of pages instead of single paths when your CMS updates a taxonomy. This keeps content consistent without triggering thousands of rebuilds.