nextjs-link-preview 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Seth Carney
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,297 @@
+# Next.js Link Preview
+
+A customizable Next.js component for generating beautiful link preview cards with images, titles, and descriptions extracted from URL metadata.
+
+## Why Next.js?
+
+**Browser CORS limitations** prevent client-side link preview components from fetching metadata from most websites. This Next.js implementation solves that problem by:
+
+- ✅ **Server-side fetching**: API route fetches metadata on the server
+- ✅ **No CORS issues**: Works with GitHub, Twitter, Reddit, and any public URL
+- ✅ **Production-ready**: Deploy to Vercel, Netlify, or any Node.js platform
+
+## Features
+
+- Automatically extracts Open Graph and meta tags from URLs
+- Three size variants: small, medium, and large
+- Two layout options: vertical (image top) and horizontal (image left)
+- Fully customizable styling
+- TypeScript support
+- Loading and error states
+- Callback functions for load and error events
+- Responsive design
+- **No CORS issues** - works with any public URL!
+
+## Quick Start
+
+### 1. Install the Package
+
+```bash
+npm install nextjs-link-preview
+```
+
+### 2. Set Up the API Route
+
+Run the setup command to automatically create the API route in your Next.js project:
+
+```bash
+npx nextjs-link-preview
+```
+
+This will create `app/api/preview/route.ts` in your project.
+
+### 3. Install Peer Dependencies
+
+```bash
+npm install axios cheerio
+```
+
+### 4. Use the Component
+
+```tsx
+import { LinkPreview } from "nextjs-link-preview";
+
+export default function Page() {
+  return (
+    <div>
+      <LinkPreview url="https://github.com" size="medium" />
+    </div>
+  );
+}
+```
+
+That's it! No CORS issues, works with any URL.
+
+## Usage Examples
+
+### Basic Example
+
+```tsx
+import { LinkPreview } from "nextjs-link-preview";
+
+export default function Page() {
+  return <LinkPreview url="https://github.com" />;
+}
+```
+
+### With Size Variants
+
+```tsx
+import { LinkPreview } from "nextjs-link-preview";
+
+export default function Page() {
+  return (
+    <div>
+      {/* Small preview - compact view with 1 line description */}
+      <LinkPreview url="https://github.com" size="small" />
+
+      {/* Medium preview (default) - balanced view with 2 line description */}
+      <LinkPreview url="https://github.com" size="medium" />
+
+      {/* Large preview - detailed view with 3 line description */}
+      <LinkPreview url="https://github.com" size="large" />
+    </div>
+  );
+}
+```
+
+### With Horizontal Layout
+
+```tsx
+import { LinkPreview } from "@/components/LinkPreview";
+
+export default function Page() {
+  return (
+    <div>
+      {/* Horizontal layout - image on left, text on right */}
+      <LinkPreview url="https://github.com" layout="horizontal" size="medium" />
+
+      {/* Vertical layout (default) - image on top, text below */}
+      <LinkPreview url="https://github.com" layout="vertical" size="medium" />
+    </div>
+  );
+}
+```
+
+### With Custom Styling
+
+```tsx
+<LinkPreview url="https://github.com" width="400px" className="my-custom-class" />
+```
+
+### With Callbacks
+
+```tsx
+<LinkPreview
+  url="https://github.com"
+  onLoad={(data) => console.log("Loaded:", data)}
+  onError={(error) => console.error("Error:", error)}
+/>
+```
+
+## API
+
+### LinkPreview Props
+
+| Prop          | Type                                 | Default          | Description                                                                     |
+| ------------- | ------------------------------------ | ---------------- | ------------------------------------------------------------------------------- |
+| `url`         | `string`                             | **required**     | The URL to generate a preview for                                               |
+| `size`        | `"small"` \| `"medium"` \| `"large"` | `"medium"`       | Size variant of the preview card                                                |
+| `layout`      | `"vertical"` \| `"horizontal"`       | `"vertical"`     | Layout: vertical (image top, text below) or horizontal (image left, text right) |
+| `width`       | `string` \| `number`                 | `"100%"`         | Width of the preview card                                                       |
+| `height`      | `string` \| `number`                 | `"auto"`         | Height of the preview card                                                      |
+| `className`   | `string`                             | `""`             | Additional CSS class name                                                       |
+| `apiEndpoint` | `string`                             | `"/api/preview"` | Custom API endpoint (if you moved the route)                                    |
+| `onLoad`      | `(data: LinkPreviewData) => void`    | `undefined`      | Callback when metadata is loaded                                                |
+| `onError`     | `(error: Error) => void`             | `undefined`      | Callback when loading fails                                                     |
+
+### Size Variants
+
+| Size     | Image Height | Title Size | Description Lines | Padding |
+| -------- | ------------ | ---------- | ----------------- | ------- |
+| `small`  | 120px        | 14px       | 1 line            | 8px     |
+| `medium` | 200px        | 16px       | 2 lines           | 12px    |
+| `large`  | 300px        | 20px       | 3 lines           | 16px    |
+
+### LinkPreviewData Type
+
+```typescript
+interface LinkPreviewData {
+  title: string; // Page title (from og:title or <title>)
+  description: string; // Page description (from og:description or meta description)
+  image: string; // Preview image URL (from og:image or twitter:image)
+  url: string; // Original URL
+}
+```
+
+## Testing & Demo
+
+This project includes an interactive test suite built with Next.js to help you experiment with different URLs and size variants.
+
+### Run the Demo
+
+```bash
+# Install demo dependencies (first time only)
+npm run demo:install
+
+# Start the demo server
+npm run demo
+```
+
+The demo application will open in your browser at http://localhost:3000 with:
+
+- Interactive URL input for testing any link
+- Pre-configured example URLs for popular sites
+- Toggle between small, medium, and large sizes
+- View extracted metadata
+- Side-by-side comparison of all size variants
+- **No CORS issues** - test GitHub, Twitter, Reddit, and more!
+
+## How It Works
+
+### 1. API Route (`app/api/preview/route.ts`)
+
+The Next.js API route runs on the server and:
+
+- Receives the URL as a query parameter
+- Fetches the HTML using axios
+- Parses metadata using Cheerio
+- Returns JSON response
+
+This bypasses CORS because it's a server-to-server request.
+
+### 2. Client Component (`components/LinkPreview.tsx`)
+
+The React component:
+
+- Calls the API route (no CORS!)
+- Handles loading and error states
+- Renders the preview card with metadata
+
+## Deployment
+
+### Vercel (Recommended)
+
+```bash
+npm run build
+vercel deploy
+```
+
+### Other Platforms
+
+This works on any platform that supports Next.js:
+
+- Netlify
+- AWS Amplify
+- Railway
+- Any Node.js hosting
+
+## Project Structure
+
+```
+nextjs-link-preview/
+├── src/
+│   └── nextjs/
+│       ├── app/
+│       │   └── api/
+│       │       └── preview/
+│       │           └── route.ts       # Server-side API route
+│       └── components/
+│           └── LinkPreview.tsx        # Client component
+├── nextjs-demo/                       # Interactive demo app
+│   ├── src/
+│   │   ├── app/
+│   │   │   ├── api/preview/
+│   │   │   ├── page.tsx              # Demo interface
+│   │   │   └── layout.tsx
+│   │   └── components/
+│   │       └── LinkPreview.tsx
+│   └── package.json
+└── package.json
+```
+
+## Dependencies
+
+### Required
+
+- **Next.js** >= 14.0.0
+- **React** >= 18.0.0
+- **axios** - For HTTP requests
+- **cheerio** - For HTML parsing and metadata extraction
+
+### Dev Dependencies
+
+- TypeScript
+- Node types
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## Troubleshooting
+
+### "Module not found" errors
+
+Make sure you've installed all dependencies:
+
+```bash
+npm install axios cheerio
+```
+
+### API route not found
+
+Ensure the API route is at `app/api/preview/route.ts` in your Next.js project.
+
+### Still getting CORS errors
+
+Make sure you're using the Next.js component, not the old React-only version. The component should be calling `/api/preview`, not fetching URLs directly.
+
+## Need Help?
+
+- Check the [demo README](nextjs-demo/README.md) for more details
+- Review the source code in `src/nextjs/`
+- Open an issue on GitHub

package/bin/setup.js

@@ -0,0 +1,107 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+
+const API_ROUTE_CONTENT = `import { NextRequest, NextResponse } from "next/server";
+import axios from "axios";
+import * as cheerio from "cheerio";
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const targetUrl = searchParams.get("url");
+
+  if (!targetUrl) {
+    return NextResponse.json(
+      { error: "URL parameter is required" },
+      { status: 400 }
+    );
+  }
+
+  try {
+    const response = await axios.get(targetUrl, {
+      headers: {
+        "User-Agent": "Mozilla/5.0 (compatible; LinkPreviewBot/1.0)",
+      },
+      timeout: 10000,
+    });
+
+    const $ = cheerio.load(response.data);
+
+    const metadata = {
+      title:
+        $('meta[property="og:title"]').attr("content") ||
+        $('meta[name="twitter:title"]').attr("content") ||
+        $("title").text() ||
+        "",
+      description:
+        $('meta[property="og:description"]').attr("content") ||
+        $('meta[name="twitter:description"]').attr("content") ||
+        $('meta[name="description"]').attr("content") ||
+        "",
+      image:
+        $('meta[property="og:image"]').attr("content") ||
+        $('meta[name="twitter:image"]').attr("content") ||
+        "",
+      url: targetUrl,
+    };
+
+    return NextResponse.json(metadata);
+  } catch (error) {
+    console.error("Error fetching preview:", error);
+    return NextResponse.json(
+      { error: "Failed to fetch preview" },
+      { status: 500 }
+    );
+  }
+}
+`;
+
+function setupApiRoute() {
+  const cwd = process.cwd();
+
+  // Check if we're in a Next.js project
+  const packageJsonPath = path.join(cwd, "package.json");
+  if (!fs.existsSync(packageJsonPath)) {
+    console.error("❌ Error: package.json not found. Make sure you're in a Next.js project directory.");
+    process.exit(1);
+  }
+
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
+  if (!packageJson.dependencies?.next && !packageJson.devDependencies?.next) {
+    console.error("❌ Error: Next.js not found in dependencies. Make sure this is a Next.js project.");
+    process.exit(1);
+  }
+
+  // Create the API route directory structure
+  const apiRoutePath = path.join(cwd, "app", "api", "preview");
+  const routeFilePath = path.join(apiRoutePath, "route.ts");
+
+  // Check if route already exists
+  if (fs.existsSync(routeFilePath)) {
+    console.log("⚠️  API route already exists at app/api/preview/route.ts");
+    console.log("To reinstall, delete the existing file and run this command again.");
+    process.exit(0);
+  }
+
+  // Create directories
+  fs.mkdirSync(apiRoutePath, { recursive: true });
+
+  // Write the route file
+  fs.writeFileSync(routeFilePath, API_ROUTE_CONTENT);
+
+  console.log("✅ Successfully created API route at app/api/preview/route.ts");
+  console.log("");
+  console.log("📦 Make sure you have the required dependencies:");
+  console.log("   npm install axios cheerio");
+  console.log("");
+  console.log("🎉 Setup complete! You can now use the LinkPreview component:");
+  console.log("");
+  console.log('   import { LinkPreview } from "nextjs-link-preview";');
+  console.log("");
+  console.log("   export default function Page() {");
+  console.log('     return <LinkPreview url="https://github.com" />;');
+  console.log("   }");
+}
+
+setupApiRoute();

package/dist/index.esm.js

@@ -0,0 +1,130 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+
+const sizeConfig = {
+    small: {
+        imageHeight: '120px',
+        imageWidth: '120px',
+        titleSize: '14px',
+        descriptionSize: '12px',
+        padding: '8px',
+        lineClamp: 1
+    },
+    medium: {
+        imageHeight: '200px',
+        imageWidth: '200px',
+        titleSize: '16px',
+        descriptionSize: '14px',
+        padding: '12px',
+        lineClamp: 2
+    },
+    large: {
+        imageHeight: '300px',
+        imageWidth: '280px',
+        titleSize: '20px',
+        descriptionSize: '16px',
+        padding: '16px',
+        lineClamp: 3
+    }
+};
+function LinkPreview({ url, size = 'medium', layout = 'vertical', width = '100%', height = 'auto', className = '', onError, onLoad, apiEndpoint = '/api/preview' }) {
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const config = sizeConfig[size];
+    useEffect(() => {
+        const fetchMetadata = async () => {
+            try {
+                setLoading(true);
+                setError(null);
+                const response = await fetch(`${apiEndpoint}?url=${encodeURIComponent(url)}`);
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error || 'Failed to fetch metadata');
+                }
+                const metadata = await response.json();
+                setData(metadata);
+                onLoad?.(metadata);
+            }
+            catch (err) {
+                const error = err instanceof Error ? err : new Error('Unknown error');
+                setError(error);
+                onError?.(error);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchMetadata();
+    }, [url, apiEndpoint]); // Don't include callbacks in dependencies to avoid infinite loops
+    if (loading) {
+        return (React.createElement("div", { style: {
+                padding: '1rem',
+                textAlign: 'center',
+                color: '#666',
+                border: '1px solid #e0e0e0',
+                borderRadius: '8px',
+                background: '#f9f9f9'
+            } }, "Loading preview..."));
+    }
+    if (error) {
+        return (React.createElement("div", { style: {
+                padding: '1rem',
+                background: '#fff3f3',
+                border: '1px solid #f44336',
+                borderRadius: '8px'
+            } },
+            React.createElement("strong", { style: { color: '#d32f2f' } }, "Error loading preview:"),
+            ' ',
+            error.message));
+    }
+    if (!data) {
+        return null;
+    }
+    const isHorizontal = layout === 'horizontal';
+    return (React.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: `link-preview ${className}`, style: {
+            display: isHorizontal ? 'flex' : 'block',
+            flexDirection: isHorizontal ? 'row' : undefined,
+            width,
+            height,
+            textDecoration: 'none',
+            color: 'inherit',
+            border: '1px solid #e0e0e0',
+            borderRadius: '8px',
+            overflow: 'hidden',
+            transition: 'box-shadow 0.3s'
+        }, onMouseEnter: (e) => {
+            e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
+        }, onMouseLeave: (e) => {
+            e.currentTarget.style.boxShadow = 'none';
+        } },
+        data.image && (React.createElement("div", { style: {
+                width: isHorizontal ? config.imageWidth : '100%',
+                height: isHorizontal ? '100%' : config.imageHeight,
+                minHeight: isHorizontal ? config.imageHeight : undefined,
+                flexShrink: isHorizontal ? 0 : undefined,
+                backgroundImage: `url(${data.image})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center'
+            } })),
+        React.createElement("div", { style: {
+                padding: config.padding,
+                flex: isHorizontal ? 1 : undefined,
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center'
+            } },
+            data.title && (React.createElement("h3", { style: { margin: '0 0 8px 0', fontSize: config.titleSize } }, data.title)),
+            data.description && (React.createElement("p", { style: {
+                    margin: 0,
+                    fontSize: config.descriptionSize,
+                    color: '#666',
+                    display: '-webkit-box',
+                    WebkitLineClamp: config.lineClamp,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden'
+                } }, data.description)))));
+}
+
+export { LinkPreview, LinkPreview as default };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/nextjs/components/LinkPreview.tsx"],"sourcesContent":["'use client';\n\n/**\n * Next.js Link Preview Component\n *\n * This component uses the Next.js API route to fetch metadata server-side,\n * avoiding CORS issues entirely.\n *\n * Usage:\n *   import { LinkPreview } from './components/LinkPreview';\n *\n *   <LinkPreview url=\"https://github.com\" size=\"medium\" />\n */\n\nimport React, { useEffect, useState } from 'react';\n\nexport interface LinkPreviewData {\n  title: string;\n  description: string;\n  image: string;\n  url: string;\n}\n\nexport type LinkPreviewSize = 'small' | 'medium' | 'large';\nexport type LinkPreviewLayout = 'vertical' | 'horizontal';\n\nexport interface LinkPreviewProps {\n  url: string;\n  size?: LinkPreviewSize;\n  layout?: LinkPreviewLayout;\n  width?: string | number;\n  height?: string | number;\n  className?: string;\n  onError?: (error: Error) => void;\n  onLoad?: (data: LinkPreviewData) => void;\n  apiEndpoint?: string; // Override the API endpoint if needed\n}\n\nconst sizeConfig = {\n  small: {\n    imageHeight: '120px',\n    imageWidth: '120px',\n    titleSize: '14px',\n    descriptionSize: '12px',\n    padding: '8px',\n    lineClamp: 1\n  },\n  medium: {\n    imageHeight: '200px',\n    imageWidth: '200px',\n    titleSize: '16px',\n    descriptionSize: '14px',\n    padding: '12px',\n    lineClamp: 2\n  },\n  large: {\n    imageHeight: '300px',\n    imageWidth: '280px',\n    titleSize: '20px',\n    descriptionSize: '16px',\n    padding: '16px',\n    lineClamp: 3\n  }\n};\n\nexport function LinkPreview({\n  url,\n  size = 'medium',\n  layout = 'vertical',\n  width = '100%',\n  height = 'auto',\n  className = '',\n  onError,\n  onLoad,\n  apiEndpoint = '/api/preview'\n}: LinkPreviewProps) {\n  const [data, setData] = useState<LinkPreviewData | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n\n  const config = sizeConfig[size];\n\n  useEffect(() => {\n    const fetchMetadata = async () => {\n      try {\n        setLoading(true);\n        setError(null);\n\n        const response = await fetch(`${apiEndpoint}?url=${encodeURIComponent(url)}`);\n\n        if (!response.ok) {\n          const errorData = await response.json();\n          throw new Error(errorData.error || 'Failed to fetch metadata');\n        }\n\n        const metadata = await response.json();\n        setData(metadata);\n        onLoad?.(metadata);\n      } catch (err) {\n        const error = err instanceof Error ? err : new Error('Unknown error');\n        setError(error);\n        onError?.(error);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchMetadata();\n  }, [url, apiEndpoint]); // Don't include callbacks in dependencies to avoid infinite loops\n\n  if (loading) {\n    return (\n      <div\n        style={{\n          padding: '1rem',\n          textAlign: 'center',\n          color: '#666',\n          border: '1px solid #e0e0e0',\n          borderRadius: '8px',\n          background: '#f9f9f9'\n        }}\n      >\n        Loading preview...\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div\n        style={{\n          padding: '1rem',\n          background: '#fff3f3',\n          border: '1px solid #f44336',\n          borderRadius: '8px'\n        }}\n      >\n        <strong style={{ color: '#d32f2f' }}>Error loading preview:</strong>{' '}\n        {error.message}\n      </div>\n    );\n  }\n\n  if (!data) {\n    return null;\n  }\n\n  const isHorizontal = layout === 'horizontal';\n\n  return (\n    <a\n      href={url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={`link-preview ${className}`}\n      style={{\n        display: isHorizontal ? 'flex' : 'block',\n        flexDirection: isHorizontal ? 'row' : undefined,\n        width,\n        height,\n        textDecoration: 'none',\n        color: 'inherit',\n        border: '1px solid #e0e0e0',\n        borderRadius: '8px',\n        overflow: 'hidden',\n        transition: 'box-shadow 0.3s'\n      }}\n      onMouseEnter={(e) => {\n        (e.currentTarget as HTMLElement).style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';\n      }}\n      onMouseLeave={(e) => {\n        (e.currentTarget as HTMLElement).style.boxShadow = 'none';\n      }}\n    >\n      {data.image && (\n        <div\n          style={{\n            width: isHorizontal ? config.imageWidth : '100%',\n            height: isHorizontal ? '100%' : config.imageHeight,\n            minHeight: isHorizontal ? config.imageHeight : undefined,\n            flexShrink: isHorizontal ? 0 : undefined,\n            backgroundImage: `url(${data.image})`,\n            backgroundSize: 'cover',\n            backgroundPosition: 'center'\n          }}\n        />\n      )}\n      <div style={{\n        padding: config.padding,\n        flex: isHorizontal ? 1 : undefined,\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center'\n      }}>\n        {data.title && (\n          <h3 style={{ margin: '0 0 8px 0', fontSize: config.titleSize }}>\n            {data.title}\n          </h3>\n        )}\n        {data.description && (\n          <p\n            style={{\n              margin: 0,\n              fontSize: config.descriptionSize,\n              color: '#666',\n              display: '-webkit-box',\n              WebkitLineClamp: config.lineClamp,\n              WebkitBoxOrient: 'vertical',\n              overflow: 'hidden'\n            } as React.CSSProperties}\n          >\n            {data.description}\n          </p>\n        )}\n      </div>\n    </a>\n  );\n}\n\nexport default LinkPreview;\n"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,135 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const sizeConfig = {
+    small: {
+        imageHeight: '120px',
+        imageWidth: '120px',
+        titleSize: '14px',
+        descriptionSize: '12px',
+        padding: '8px',
+        lineClamp: 1
+    },
+    medium: {
+        imageHeight: '200px',
+        imageWidth: '200px',
+        titleSize: '16px',
+        descriptionSize: '14px',
+        padding: '12px',
+        lineClamp: 2
+    },
+    large: {
+        imageHeight: '300px',
+        imageWidth: '280px',
+        titleSize: '20px',
+        descriptionSize: '16px',
+        padding: '16px',
+        lineClamp: 3
+    }
+};
+function LinkPreview({ url, size = 'medium', layout = 'vertical', width = '100%', height = 'auto', className = '', onError, onLoad, apiEndpoint = '/api/preview' }) {
+    const [data, setData] = React.useState(null);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(null);
+    const config = sizeConfig[size];
+    React.useEffect(() => {
+        const fetchMetadata = async () => {
+            try {
+                setLoading(true);
+                setError(null);
+                const response = await fetch(`${apiEndpoint}?url=${encodeURIComponent(url)}`);
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error || 'Failed to fetch metadata');
+                }
+                const metadata = await response.json();
+                setData(metadata);
+                onLoad?.(metadata);
+            }
+            catch (err) {
+                const error = err instanceof Error ? err : new Error('Unknown error');
+                setError(error);
+                onError?.(error);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchMetadata();
+    }, [url, apiEndpoint]); // Don't include callbacks in dependencies to avoid infinite loops
+    if (loading) {
+        return (React.createElement("div", { style: {
+                padding: '1rem',
+                textAlign: 'center',
+                color: '#666',
+                border: '1px solid #e0e0e0',
+                borderRadius: '8px',
+                background: '#f9f9f9'
+            } }, "Loading preview..."));
+    }
+    if (error) {
+        return (React.createElement("div", { style: {
+                padding: '1rem',
+                background: '#fff3f3',
+                border: '1px solid #f44336',
+                borderRadius: '8px'
+            } },
+            React.createElement("strong", { style: { color: '#d32f2f' } }, "Error loading preview:"),
+            ' ',
+            error.message));
+    }
+    if (!data) {
+        return null;
+    }
+    const isHorizontal = layout === 'horizontal';
+    return (React.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: `link-preview ${className}`, style: {
+            display: isHorizontal ? 'flex' : 'block',
+            flexDirection: isHorizontal ? 'row' : undefined,
+            width,
+            height,
+            textDecoration: 'none',
+            color: 'inherit',
+            border: '1px solid #e0e0e0',
+            borderRadius: '8px',
+            overflow: 'hidden',
+            transition: 'box-shadow 0.3s'
+        }, onMouseEnter: (e) => {
+            e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
+        }, onMouseLeave: (e) => {
+            e.currentTarget.style.boxShadow = 'none';
+        } },
+        data.image && (React.createElement("div", { style: {
+                width: isHorizontal ? config.imageWidth : '100%',
+                height: isHorizontal ? '100%' : config.imageHeight,
+                minHeight: isHorizontal ? config.imageHeight : undefined,
+                flexShrink: isHorizontal ? 0 : undefined,
+                backgroundImage: `url(${data.image})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center'
+            } })),
+        React.createElement("div", { style: {
+                padding: config.padding,
+                flex: isHorizontal ? 1 : undefined,
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center'
+            } },
+            data.title && (React.createElement("h3", { style: { margin: '0 0 8px 0', fontSize: config.titleSize } }, data.title)),
+            data.description && (React.createElement("p", { style: {
+                    margin: 0,
+                    fontSize: config.descriptionSize,
+                    color: '#666',
+                    display: '-webkit-box',
+                    WebkitLineClamp: config.lineClamp,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden'
+                } }, data.description)))));
+}
+
+exports.LinkPreview = LinkPreview;
+exports.default = LinkPreview;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/nextjs/components/LinkPreview.tsx"],"sourcesContent":["'use client';\n\n/**\n * Next.js Link Preview Component\n *\n * This component uses the Next.js API route to fetch metadata server-side,\n * avoiding CORS issues entirely.\n *\n * Usage:\n *   import { LinkPreview } from './components/LinkPreview';\n *\n *   <LinkPreview url=\"https://github.com\" size=\"medium\" />\n */\n\nimport React, { useEffect, useState } from 'react';\n\nexport interface LinkPreviewData {\n  title: string;\n  description: string;\n  image: string;\n  url: string;\n}\n\nexport type LinkPreviewSize = 'small' | 'medium' | 'large';\nexport type LinkPreviewLayout = 'vertical' | 'horizontal';\n\nexport interface LinkPreviewProps {\n  url: string;\n  size?: LinkPreviewSize;\n  layout?: LinkPreviewLayout;\n  width?: string | number;\n  height?: string | number;\n  className?: string;\n  onError?: (error: Error) => void;\n  onLoad?: (data: LinkPreviewData) => void;\n  apiEndpoint?: string; // Override the API endpoint if needed\n}\n\nconst sizeConfig = {\n  small: {\n    imageHeight: '120px',\n    imageWidth: '120px',\n    titleSize: '14px',\n    descriptionSize: '12px',\n    padding: '8px',\n    lineClamp: 1\n  },\n  medium: {\n    imageHeight: '200px',\n    imageWidth: '200px',\n    titleSize: '16px',\n    descriptionSize: '14px',\n    padding: '12px',\n    lineClamp: 2\n  },\n  large: {\n    imageHeight: '300px',\n    imageWidth: '280px',\n    titleSize: '20px',\n    descriptionSize: '16px',\n    padding: '16px',\n    lineClamp: 3\n  }\n};\n\nexport function LinkPreview({\n  url,\n  size = 'medium',\n  layout = 'vertical',\n  width = '100%',\n  height = 'auto',\n  className = '',\n  onError,\n  onLoad,\n  apiEndpoint = '/api/preview'\n}: LinkPreviewProps) {\n  const [data, setData] = useState<LinkPreviewData | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n\n  const config = sizeConfig[size];\n\n  useEffect(() => {\n    const fetchMetadata = async () => {\n      try {\n        setLoading(true);\n        setError(null);\n\n        const response = await fetch(`${apiEndpoint}?url=${encodeURIComponent(url)}`);\n\n        if (!response.ok) {\n          const errorData = await response.json();\n          throw new Error(errorData.error || 'Failed to fetch metadata');\n        }\n\n        const metadata = await response.json();\n        setData(metadata);\n        onLoad?.(metadata);\n      } catch (err) {\n        const error = err instanceof Error ? err : new Error('Unknown error');\n        setError(error);\n        onError?.(error);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchMetadata();\n  }, [url, apiEndpoint]); // Don't include callbacks in dependencies to avoid infinite loops\n\n  if (loading) {\n    return (\n      <div\n        style={{\n          padding: '1rem',\n          textAlign: 'center',\n          color: '#666',\n          border: '1px solid #e0e0e0',\n          borderRadius: '8px',\n          background: '#f9f9f9'\n        }}\n      >\n        Loading preview...\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div\n        style={{\n          padding: '1rem',\n          background: '#fff3f3',\n          border: '1px solid #f44336',\n          borderRadius: '8px'\n        }}\n      >\n        <strong style={{ color: '#d32f2f' }}>Error loading preview:</strong>{' '}\n        {error.message}\n      </div>\n    );\n  }\n\n  if (!data) {\n    return null;\n  }\n\n  const isHorizontal = layout === 'horizontal';\n\n  return (\n    <a\n      href={url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={`link-preview ${className}`}\n      style={{\n        display: isHorizontal ? 'flex' : 'block',\n        flexDirection: isHorizontal ? 'row' : undefined,\n        width,\n        height,\n        textDecoration: 'none',\n        color: 'inherit',\n        border: '1px solid #e0e0e0',\n        borderRadius: '8px',\n        overflow: 'hidden',\n        transition: 'box-shadow 0.3s'\n      }}\n      onMouseEnter={(e) => {\n        (e.currentTarget as HTMLElement).style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';\n      }}\n      onMouseLeave={(e) => {\n        (e.currentTarget as HTMLElement).style.boxShadow = 'none';\n      }}\n    >\n      {data.image && (\n        <div\n          style={{\n            width: isHorizontal ? config.imageWidth : '100%',\n            height: isHorizontal ? '100%' : config.imageHeight,\n            minHeight: isHorizontal ? config.imageHeight : undefined,\n            flexShrink: isHorizontal ? 0 : undefined,\n            backgroundImage: `url(${data.image})`,\n            backgroundSize: 'cover',\n            backgroundPosition: 'center'\n          }}\n        />\n      )}\n      <div style={{\n        padding: config.padding,\n        flex: isHorizontal ? 1 : undefined,\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center'\n      }}>\n        {data.title && (\n          <h3 style={{ margin: '0 0 8px 0', fontSize: config.titleSize }}>\n            {data.title}\n          </h3>\n        )}\n        {data.description && (\n          <p\n            style={{\n              margin: 0,\n              fontSize: config.descriptionSize,\n              color: '#666',\n              display: '-webkit-box',\n              WebkitLineClamp: config.lineClamp,\n              WebkitBoxOrient: 'vertical',\n              overflow: 'hidden'\n            } as React.CSSProperties}\n          >\n            {data.description}\n          </p>\n        )}\n      </div>\n    </a>\n  );\n}\n\nexport default LinkPreview;\n"],"names":["useState","useEffect"],"mappings":"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"}

package/dist/nextjs/components/LinkPreview.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Next.js Link Preview Component
+ *
+ * This component uses the Next.js API route to fetch metadata server-side,
+ * avoiding CORS issues entirely.
+ *
+ * Usage:
+ *   import { LinkPreview } from './components/LinkPreview';
+ *
+ *   <LinkPreview url="https://github.com" size="medium" />
+ */
+import React from 'react';
+export interface LinkPreviewData {
+    title: string;
+    description: string;
+    image: string;
+    url: string;
+}
+export type LinkPreviewSize = 'small' | 'medium' | 'large';
+export type LinkPreviewLayout = 'vertical' | 'horizontal';
+export interface LinkPreviewProps {
+    url: string;
+    size?: LinkPreviewSize;
+    layout?: LinkPreviewLayout;
+    width?: string | number;
+    height?: string | number;
+    className?: string;
+    onError?: (error: Error) => void;
+    onLoad?: (data: LinkPreviewData) => void;
+    apiEndpoint?: string;
+}
+export declare function LinkPreview({ url, size, layout, width, height, className, onError, onLoad, apiEndpoint }: LinkPreviewProps): React.JSX.Element | null;
+export default LinkPreview;
+//# sourceMappingURL=LinkPreview.d.ts.map

package/dist/nextjs/components/LinkPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkPreview.d.ts","sourceRoot":"","sources":["../../../src/nextjs/components/LinkPreview.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3D,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,YAAY,CAAC;AAE1D,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA6BD,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,IAAe,EACf,MAAmB,EACnB,KAAc,EACd,MAAe,EACf,SAAc,EACd,OAAO,EACP,MAAM,EACN,WAA4B,EAC7B,EAAE,gBAAgB,4BA8IlB;AAED,eAAe,WAAW,CAAC"}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "nextjs-link-preview",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A Next.js component for generating beautiful link preview cards with server-side metadata fetching - No CORS issues!",
+  "keywords": [
+    "nextjs",
+    "next",
+    "react",
+    "link-preview",
+    "preview",
+    "metadata",
+    "opengraph",
+    "og",
+    "card",
+    "component",
+    "typescript",
+    "server-side"
+  ],
+  "author": "Seth Carney",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sethcarney/nextjs-link-preview"
+  },
+  "homepage": "https://github.com/sethcarney/nextjs-link-preview#readme",
+  "bugs": {
+    "url": "https://github.com/sethcarney/nextjs-link-preview/issues"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "bin",
+    "README.md",
+    "LICENSE"
+  ],
+  "bin": {
+    "nextjs-link-preview": "./bin/setup.js"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "prepublishOnly": "npm run build",
+    "demo": "cd nextjs-demo && npm run dev",
+    "demo:install": "cd nextjs-demo && npm install",
+    "demo:build": "cd nextjs-demo && npm run build"
+  },
+  "peerDependencies": {
+    "next": ">=14.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "axios": "^1.6.0",
+    "cheerio": "^1.0.0-rc.12"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "rollup": "^4.53.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3"
+  }
+}