Next.js Header & Footer Wrapper Package

A reusable, TypeScript-ready header and footer component package for Next.js applications.

Features

• 🚀 Modern Design: Clean, responsive components with Tailwind CSS
• 🔷 TypeScript Support: Full type safety and IntelliSense support
• 📱 Mobile First: Responsive design that works on all devices
• ⚡ Lightweight: Minimal bundle size with tree-shaking support
• 🎨 Customizable: Easy to theme and customize
• 🔗 Navigation Ready: Built-in navigation and social links support

Installation

npm install @your-org/nextjs-wrapper

Quick Start

import { Header, Footer } from '@your-org/nextjs-wrapper';
import type { NavigationItem, SocialLink } from '@your-org/nextjs-wrapper';

const navigation: NavigationItem[] = [
  { label: 'Home', href: '/' },
  { label: 'About', href: '/about' },
  { label: 'Contact', href: '/contact' },
];

const socialLinks: SocialLink[] = [
  { platform: 'twitter', url: 'https://twitter.com/yourcompany' },
  { platform: 'github', url: 'https://github.com/yourcompany' },
];

export default function Layout({ children }) {
  return (
    <>
      <Header
        brandName="Your Company"
        navigation={navigation}
        onNavigate={(href) => router.push(href)}
      />
      
      <main>{children}</main>
      
      <Footer
        companyName="Your Company"
        description="Building amazing products"
        socialLinks={socialLinks}
        onNavigate={(href) => router.push(href)}
      />
    </>
  );
}

API Reference

Header Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | logo | string | - | Logo image URL | | logoAlt | string | 'Logo' | Logo alt text | | brandName | string | 'Brand' | Company/brand name | | navigation | NavigationItem[] | [] | Navigation items | | className | string | '' | Additional CSS classes | | onNavigate | (href: string) => void | - | Navigation handler |

Footer Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | companyName | string | 'Your Company' | Company name | | description | string | 'Building amazing products...' | Company description | | socialLinks | SocialLink[] | [] | Social media links | | navigationColumns | NavigationColumn[] | [] | Footer navigation columns | | copyright | string | Auto-generated | Custom copyright text | | className | string | '' | Additional CSS classes | | onNavigate | (href: string) => void | - | Navigation handler |

Types

interface NavigationItem {
  label: string;
  href: string;
  external?: boolean;
}

interface SocialLink {
  platform: 'twitter' | 'facebook' | 'linkedin' | 'github' | 'instagram';
  url: string;
}

Development

To build and publish this package:

1. Build the package:

   npm run build:package

2. Test locally:

   npm link
   cd your-test-app
   npm link @your-org/nextjs-wrapper

3. Publish to npm:

   npm publish --access public

Usage in Other Apps

After publishing, install in your Next.js applications:

npm install @your-org/nextjs-wrapper

Make sure your app has the required peer dependencies:

• react >= 18.0.0
• react-dom >= 18.0.0
• next >= 13.0.0

Styling

The components use Tailwind CSS classes. Make sure your consuming application has Tailwind CSS configured, or override the styles with your own CSS framework.

License

MIT License - see LICENSE file for details.