OpenLink

Frameworks

Using OpenLink with popular frameworks.

Next.js

App Router

import { preview } from "openlink"

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const url = searchParams.get("url")

  if (!url) {
    return Response.json({ error: "Missing url" }, { status: 400 })
  }

  const data = await preview(url, { retry: 2 })
  return Response.json(data)
}

Server Component

import { preview } from "openlink"

export default async function LinkPreview({ url }: { url: string }) {
  const data = await preview(url)

  return (
    <div>
      <h3>{data.title}</h3>
      <p>{data.description}</p>
      {data.image && <img src={data.image} alt="" />}
    </div>
  )
}

Server Action

"use server"

import { preview } from "openlink"

export async function getPreview(url: string) {
  return preview(url)
}

Nuxt

Server Route

import { preview } from "openlink"

export default defineEventHandler(async (event) => {
  const url = getQuery(event).url as string

  if (!url) {
    throw createError({ statusCode: 400, message: "Missing url" })
  }

  return preview(url)
})

Composable

export const useLinkPreview = async (url: string) => {
  const { data } = await useFetch(`/api/preview?url=${encodeURIComponent(url)}`)
  return data
}

SvelteKit

Server Route

import { preview } from "openlink"
import { json, error } from "@sveltejs/kit"

export async function GET({ url }) {
  const targetUrl = url.searchParams.get("url")

  if (!targetUrl) {
    throw error(400, "Missing url")
  }

  const data = await preview(targetUrl)
  return json(data)
}

Load Function

import { preview } from "openlink"

export async function load({ params }) {
  const url = decodeURIComponent(params.url)
  const data = await preview(url)
  return { preview: data }
}

Remix

Loader

import { preview } from "openlink"
import { json } from "@remix-run/node"

export async function loader({ request }) {
  const url = new URL(request.url)
  const targetUrl = url.searchParams.get("url")

  if (!targetUrl) {
    return json({ error: "Missing url" }, { status: 400 })
  }

  const data = await preview(targetUrl)
  return json(data)
}

Astro

API Route

import type { APIRoute } from "astro"
import { preview } from "openlink"

export const GET: APIRoute = async ({ url }) => {
  const targetUrl = url.searchParams.get("url")

  if (!targetUrl) {
    return new Response(JSON.stringify({ error: "Missing url" }), {
      status: 400
    })
  }

  const data = await preview(targetUrl)
  return new Response(JSON.stringify(data))
}

On this page