Package Exports

dev-credit
dev-credit/auto

Readme

dev-credit 🎨

Automatically add developer credits to your Next.js projects via HTML meta tags

✨ Features

🏷️ Meta Tags Integration: Automatically adds developer info to HTML head tags
🚀 Zero Config Option: Import and forget - works automatically
📦 ESM Compatible: Full ES Module support with Tree Shaking
🔧 Fully Customizable: Use default credits or provide your own
🎯 Next.js Optimized: Works seamlessly with Next.js 13+ App Router
👤 SEO Friendly: Proper meta tags for search engines and social media
🔇 Clean Console: No console output - only clean meta tag attribution

📦 Installation

npm install dev-credit

🚀 Quick Start

Option 1: Zero-Config Meta Tags (Instant Setup)

Add this single line to your root layout file (app/layout.js or app/layout.tsx):

import "dev-credit/auto";
import { withDevCredit } from "dev-credit";

export const metadata = withDevCredit();

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

That's it! 🎉 Your site will now have developer credits in HTML meta tags.

Option 2: Add Developer Credits to Meta Tags

Add developer information to your HTML head tags for SEO and attribution:

import { withDevCredit } from "dev-credit";

// Use default developer credit (Himangshu Mishra)
export const metadata = withDevCredit();

// Or merge with your existing metadata
export const metadata = withDevCredit(undefined, {
  title: "My Awesome Next.js App",
  description: "An amazing application built with Next.js",
});

This adds proper meta tags to your HTML <head> section:

<meta name="developer" content="Himangshu Mishra" />
<meta name="developer-website" content="https://mishra.codes" />
<meta name="developer-contact" content="contact@mishra.codes" />
<meta name="built-by" content="Himangshu Mishra" />
<meta
  name="attribution"
  content="Developed by Himangshu Mishra - https://mishra.codes"
/>

Option 2: Custom Developer Credits

Use your own developer information:

import { withDevCredit } from "dev-credit";

export const metadata = withDevCredit(
  {
    developer: "Your Name",
    website: "https://yourwebsite.com",
    email: "you@example.com",
    github: "https://github.com/yourusername",
  },
  {
    title: "My App",
    description: "My awesome app",
  }
);

Option 3: Complete Setup (Meta Tags Only)

Complete example with custom credits and existing metadata:

// app/layout.js
import "dev-credit/auto"; // Provides compatibility but no console output
import { withDevCredit } from "dev-credit";

// Custom meta tags
export const metadata = withDevCredit(
  {
    developer: "Your Name",
    website: "https://yourwebsite.com",
    email: "you@example.com",
    github: "https://github.com/yourusername",
  },
  {
    title: "My Awesome App",
    description: "Built with Next.js",
  }
);

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>{/* Meta tags are automatically added by Next.js */}</head>
      <body>{children}</body>
    </html>
  );
}

🛠️ API Reference

`withDevCredit(creditData?, existingMetadata?)`

Merges developer credit information into Next.js metadata object.

Parameters:

creditData (Object, optional): Developer information
- developer (string): Developer name (default: "Himangshu Mishra")
- website (string): Developer website (default: "https://mishra.codes")
- email (string): Developer email (default: "contact@mishra.codes")
- github (string): GitHub profile (default: "https://github.com/himangshumishra")
existingMetadata (Object, optional): Your existing Next.js metadata

Returns: Complete metadata object with developer credits

Example:

const metadata = withDevCredit(
  {
    developer: "John Doe",
    website: "https://johndoe.dev",
  },
  {
    title: "My Site",
  }
);

`getDevCreditMetadata(existingMetadata?)`

Generates metadata using default developer credit (Himangshu Mishra).

Parameters:

existingMetadata (Object, optional): Your existing metadata

Returns: Metadata object with default developer credits

`createDevCreditMeta(creditData?)`

Creates custom meta tags specifically for developer attribution.

Parameters:

creditData (Object, optional): Developer information

Returns: Metadata object focused on developer attribution

`import "dev-credit/auto"`

Zero-config import for compatibility. This module provides the same developer credit data without any console operations.

Features:

No console output - clean browser console
Compatible with all Next.js versions 13+
Lightweight and performance optimized
Works with client-side navigation

📋 What Gets Added?

Meta Tags (HTML Head)

<!-- Author Information -->
<meta name="creator" content="Himangshu Mishra" />
<meta name="publisher" content="Himangshu Mishra" />
<meta name="developer" content="Himangshu Mishra" />
<meta name="developer-website" content="https://mishra.codes" />
<meta name="developer-contact" content="contact@mishra.codes" />
<meta name="developer-github" content="https://github.com/himangshumishra" />
<meta name="built-by" content="Himangshu Mishra" />
<meta
  name="attribution"
  content="Developed by Himangshu Mishra - https://mishra.codes"
/>

<!-- Open Graph -->
<meta property="og:author" content="Himangshu Mishra" />

<!-- Twitter Card -->
<meta name="twitter:creator" content="@himangshimishra" />

No Console Output

This package does not add any console messages. It maintains a clean browser console while providing proper attribution through HTML meta tags only.

📋 Requirements

Next.js: 13.0.0 or higher
Node.js: 16.0.0 or higher
Environment: Works in all environments (no browser dependencies)

🎯 Use Cases

Portfolio Websites: Add professional developer attribution
Client Projects: Subtle branding and contact information
Open Source: Give credit to contributors
Agency Work: Brand your development services
SEO: Improve developer/author metadata

🌟 Default Developer Credit

This package defaults to crediting:

Himangshu Mishra

You can always override this with your own information!

🔧 Advanced Usage

Environment-Specific Credits

import { withDevCredit } from "dev-credit";

const isDev = process.env.NODE_ENV === "development";

export const metadata = withDevCredit(
  isDev
    ? {
        developer: "Dev Team",
        website: "http://localhost:3000",
      }
    : {
        developer: "Production Team",
        website: "https://yoursite.com",
      }
);

Multiple Developers

import { withDevCredit } from "dev-credit";

export const metadata = withDevCredit(undefined, {
  authors: [
    { name: "Himangshu Mishra", url: "https://mishra.codes" },
    { name: "Your Name", url: "https://yoursite.com" },
  ],
});

Conditional Loading

// Always load - no console output to worry about
import "dev-credit/auto";
import { withDevCredit } from "dev-credit";

export const metadata = withDevCredit();

📄 License

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📞 Support

🐛 Issues: GitHub Issues
📧 Email: contact@mishra.codes
💼 Website: mishra.codes

🙏 Acknowledgments

Built with ❤️ for the Next.js community.

⭐ If this package helps you, please give it a star on GitHub!

Made with ❤️ by Himangshu Mishra | Portfolio | Contact