LogoNEXTDEVKIT Docs

Social Media Configuration

Configure social media links and icons for your website

NEXTDEVKIT provides a centralized social media configuration system for displaying social media links and icons throughout your website. The social media configuration is located in src/config/social-media.tsx.

🔧 Social Media Structure

The social media system provides a consistent interface for displaying social media links:

src/config/social-media.tsx
import { SocialMediaIcons as Icons } from "@/components/icons/social-media";
import { useTranslations } from "next-intl";
import type { ReactNode } from "react";

export interface SocialMedia {
	name: string;
	href: string;
	icon: ReactNode;
}

export function getSocialMediaData(): {
	title: string;
	media: SocialMedia[];
} {
	const t = useTranslations("footer");

	return {
		title: t("social.title"),
		media: [
			{
				name: "Facebook",
				href: "https://www.facebook.com",
				icon: <Icons.Facebook className="h-4 w-4" />,
			},
			{
				name: "X",
				href: "https://www.x.com",
				icon: <Icons.X className="h-4 w-4" />,
			},
			{
				name: "Instagram",
				href: "https://www.instagram.com",
				icon: <Icons.Instagram className="h-4 w-4" />,
			},
			{
				name: "Linkedin",
				href: "https://www.linkedin.com",
				icon: <Icons.LinkedIn className="h-4 w-4" />,
			},
		],
	};
}

📋 Social Media Types

SocialMedia Interface

export interface SocialMedia {
  name: string;
  href: string;
  icon: ReactNode;
}
PropertyTypeDescription
namestringDisplay name of the social media platform
hrefstringURL to your social media profile
iconReactNodeReact icon component for the platform

Social Media Data Structure

PropertyTypeDescription
titlestringSection title for social media links
mediaSocialMedia[]Array of social media configurations

🎨 Icon Integration

Social media configurations use icon components from the icon system:

src/components/icons/social-media.tsx
import { SocialMediaIcons as Icons } from "@/components/icons/social-media";
import GitHub from "@/components/icons/social-media/github";

Available Social Media Icons

The icon system includes comprehensive social media icons:

src/components/icons/social-media.tsx
// Available icons from SocialMediaIcons
export const SocialMediaIcons = {
	Bluesky,
	Discord,
	Facebook,
	Google,
	Instagram,
	LinkedIn,
	ProductHunt,
	TikTok,
	X,
	YouTube,
};