August 01, 2024

1 min

In Next.js 15 handling assets (images, fonts, icons) and metadata (SEO, Open Graph, structured data) is crucial for a well-optimized project. Here’s how to do both effectively:

1. Managing Assets in Next.js 15

Next.js provides several ways to handle assets, including the public directory and static imports.

1.1 Using the `public` Directory (Recommended)

Store static assets like images, fonts, and favicons in the public/ folder. You can reference them directly in your components:

export default function Profile() {
  return <img src="/images/profile.png" alt="Profile Image" className="w-32 h-32" />;
}

✅ Pros: Simple, no extra import statements.
❌ Cons: No automatic optimization.

1.2 Importing Images with `next/image` (Best for Optimization)

Next.js provides an automatic image optimization feature using the next/image component.

Install Dependencies

npm install next

Usage Example

import Image from "next/image";

export default function Profile() {
  return (
    <Image
      src="/images/profile.png"
      alt="Profile Image"
      width={128}
      height={128}
      className="rounded-full"
    />
  );
}

Why use next/image?

🚀 Automatic lazy loading
🖼️ Optimized formats (WebP, AVIF)
📏 Responsive sizes
💾 Cache-friendly

1.3 Handling SVGs (Inline vs. External)

Inline SVGs

For simple SVG icons, you can use inline SVG inside your JSX:

export default function Icon() {
  return (
    <svg className="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" strokeWidth={2}>
      <path d="M5 13l4 4L19 7"></path>
    </svg>
  );
}

Using SVG as Components (`@svgr/webpack`)

For large SVG files, you can install SVGR to import them as React components:

npm install @svgr/webpack

Then, update your next.config.js:

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });
    return config;
  },
};

Now, you can import SVGs as components:

import Logo from "../public/logo.svg";

export default function Header() {
  return <Logo className="w-24 h-24 text-red-500" />;
}

2. Managing Metadata in Next.js 15

Metadata is essential for SEO and social sharing. Next.js 15 provides built-in support for metadata via the metadata object.

2.1 Setting Metadata in `layout.js` (for App Router)

If using the App Router (app/layout.js), define metadata like this:

export const metadata = {
  title: "My Awesome Website",
  description: "The best site for web development tips.",
  keywords: "Next.js, Tailwind CSS, Web Development",
  openGraph: {
    title: "My Awesome Website",
    description: "The best site for web development tips.",
    images: "/images/og-image.jpg",
  },
  twitter: {
    card: "summary_large_image",
    site: "@mywebsite",
    title: "My Awesome Website",
    description: "The best site for web development tips.",
    images: "/images/twitter-card.jpg",
  },
};

This automatically sets:

Page title (<title>)
Meta description (<meta name="description">)
Open Graph meta tags (for Facebook, LinkedIn, etc.)
Twitter card metadata

2.2 Setting Metadata Dynamically (`page.js`)

For dynamic pages, use the generateMetadata function:

export async function generateMetadata({ params }) {
  return {
    title: `Article: ${params.slug}`,
    description: `Read about ${params.slug} in detail.`,
  };
}

2.3 Setting Metadata in Pages Router (`_app.js` + `next/head`)

If using the Pages Router (pages/_app.js), manually set metadata using next/head:

import Head from "next/head";

export default function Home() {
  return (
    <>
      <Head>
        <title>My Website</title>
        <meta name="description" content="The best site for web development tips." />
        <meta property="og:image" content="/images/og-image.jpg" />
      </Head>
      <h1>Welcome to My Website</h1>
    </>
  );
}

3. Adding Favicon in Next.js

Add your favicon.ico inside the public/ folder and reference it in layout.js:

export const metadata = {
  title: "My Website",
  icons: {
    icon: "/favicon.ico",
    shortcut: "/favicon.ico",
    apple: "/apple-touch-icon.png",
  },
};

Final Thoughts

With these steps, you can: ✅ Optimize asset handling (images, fonts, SVGs)
✅ Improve SEO with metadata (titles, descriptions, Open Graph, Twitter Cards)
✅ Enhance user experience with fast-loading assets

Now, your Next.js 15 + Tailwind CSS 4 project is well-optimized! 🚀
Let me know if you need further refinements.

Table Of Contents

1. Managing Assets in Next.js 15

1.1 Using the `public` Directory (Recommended)

1.2 Importing Images with `next/image` (Best for Optimization)

Install Dependencies

Usage Example

1.3 Handling SVGs (Inline vs. External)

Inline SVGs

Using SVG as Components (`@svgr/webpack`)

2. Managing Metadata in Next.js 15

2.1 Setting Metadata in `layout.js` (for App Router)

2.2 Setting Metadata Dynamically (`page.js`)

2.3 Setting Metadata in Pages Router (`_app.js` + `next/head`)

3. Adding Favicon in Next.js

Final Thoughts

Tags

Share

Related Posts

Table Of Contents

1.2 Importing Images with next/image (Best for Optimization)

Install Dependencies

Usage Example

1.3 Handling SVGs (Inline vs. External)

Inline SVGs

Using SVG as Components (@svgr/webpack)

2. Managing Metadata in Next.js 15

2.1 Setting Metadata in layout.js (for App Router)

2.2 Setting Metadata Dynamically (page.js)

2.3 Setting Metadata in Pages Router (_app.js + next/head)

.css-1qh5hbx{box-sizing:border-box;margin:0;min-width:0;display:block;color:var(--theme-ui-colors-heading,#2d3748);font-weight:bold;-webkit-text-decoration:none;text-decoration:none;margin-bottom:1rem;font-size:1.5rem;position:relative;}3. Adding Favicon in Next.js

Final Thoughts

Tags

Share

Related Posts

1.2 Importing Images with `next/image` (Best for Optimization)

Using SVG as Components (`@svgr/webpack`)

2.1 Setting Metadata in `layout.js` (for App Router)

2.2 Setting Metadata Dynamically (`page.js`)

2.3 Setting Metadata in Pages Router (`_app.js` + `next/head`)

3. Adding Favicon in Next.js