Where Are Downloaded Assets Stored in the AI Website Cloner Template?

Downloaded assets are stored in the public folder, with images organized under public/images/, videos under public/videos/, and SEO files under public/seo/.

The AI Website Cloner Template automatically extracts and categorizes media files from target websites into a structured directory layout within the Next.js public folder. This architecture ensures that cloned sites maintain their original asset references while leveraging Next.js static file serving capabilities. Understanding exactly where downloaded assets are stored allows developers to predict file paths and integrate media seamlessly into their components.

Public Folder Structure

According to the JCodesMore/ai-website-cloner-template source code, the template creates three primary subdirectories inside the public folder to organize extracted content. This structure is documented in the repository's README.md under the Project Structure section, specifically around lines 121-124, which maps each subdirectory to its intended purpose.

Image Assets (public/images/)

All raster graphics and SVG pictures downloaded during the cloning process are placed in the public/images/ directory. The cloning pipeline automatically creates this folder if it does not exist and preserves the original filenames where possible. Because Next.js serves public files at the root URL, these images become accessible via paths like /images/logo.png.

Video Assets (public/videos/)

Video files scraped from the source website are stored in public/videos/. This separation prevents large media files from cluttering the image directory while maintaining predictable URL patterns. Components can reference these files using root-relative paths such as /videos/hero.mp4.

SEO Assets (public/seo/)

Favicons, Open Graph images, web manifest files, and other SEO-related assets are isolated in public/seo/. This organizational strategy keeps metadata files separate from content media, making it easier to manage site-wide SEO configuration. These files are accessible at runtime via paths like /seo/favicon.ico or /seo/og-image.jpg.

Accessing Downloaded Assets in Code

Because the assets reside in the public folder, you can reference them directly using root-relative URLs without importing the files into your component modules. This approach mirrors standard HTML behavior while benefiting from Next.js optimization features.

Referencing Images

Use the Next.js Image component to serve downloaded images efficiently. Point the src attribute to the corresponding path under /images/:

import Image from 'next/image';

export default function Logo() {
  return (
    <Image
      src="/images/logo.png"
      alt="Site logo"
      width={200}
      height={60}
    />
  );
}

This resolves to public/images/logo.png at build time and runtime.

Embedding Videos

Reference downloaded video files using standard HTML5 video elements or video player libraries. The root-relative path maps directly to the public/videos/ directory:

export default function HeroVideo() {
  return (
    <video
      src="/videos/hero.mp4"
      controls
      autoPlay
      muted
      loop
    />
  );
}

Configuring SEO Metadata

Reference SEO assets in your metadata configuration or custom <head> elements using the /seo/ path prefix:

export const metadata = {
  icons: [
    {
      rel: 'icon',
      href: '/seo/favicon.ico',
    },
  ],
  openGraph: {
    images: '/seo/og-image.jpg',
  },
};

These paths resolve to public/seo/favicon.ico and public/seo/og-image.jpg respectively.

Summary

• The AI Website Cloner Template stores all extracted media in the Next.js public folder to enable static file serving.
• Images are saved to public/images/ and accessible via /images/ URLs.
• Videos are stored in public/videos/ and referenced using /videos/ paths.
• SEO assets including favicons and Open Graph images reside in public/seo/.
• The directory structure is defined in README.md and ensures cloned websites maintain original asset references.

Frequently Asked Questions

What types of files does the AI Website Cloner Template download?

The template extracts raster images, SVG graphics, video files, and SEO-related assets including favicons, Open Graph images, and web manifest files. These are categorized into the public/images/, public/videos/, and public/seo/ directories based on file type and purpose.

How do I reference a downloaded image in my Next.js components?

Reference downloaded images using root-relative paths starting with /images/ followed by the filename. The Next.js Image component or standard HTML img tags automatically resolve these paths to the public/images/ directory at runtime.

Why are assets stored in the public folder instead of the src directory?

Next.js automatically serves all files inside the public directory at the root URL path without requiring import statements or additional build configuration. This allows the AI Website Cloner Template to mirror the original website's URL structure exactly, ensuring that relative links to media files continue to work in the cloned version.

Where are favicons and web manifest files stored?

SEO-specific files including favicons, Open Graph images, and manifest.json are stored in the public/seo/ directory. You can reference these in your metadata configuration using paths like /seo/favicon.ico as documented in the repository's README.md.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}