Pro

Next.js

PreviousNext

Set up a Next.js App Router project and install your first Jolocky footer with the shadcn CLI.

Next.js with the App Router is the primary platform for Jolocky. Follow this guide to set up a new project or add Jolocky to an existing one.

1. Create a Next.js Project

Skip this step if you already have a Next.js app. Otherwise, create one with TypeScript, Tailwind CSS, and the App Router:

pnpm create next-app@latest my-app --typescript --tailwind --app

2. Initialize the shadcn CLI

Create a components.json if your project does not have one:

pnpm dlx shadcn@latest init

There are no other packages to install up front. If an item needs an npm package (for example three for Sonar Terrain), the CLI installs it when you add that item.

Free items install without a key:

pnpm dlx shadcn@latest add https://www.jolocky.com/r/aurora-drift.json

For a Pro item, add your license key to the URL, or set up the @jolocky namespace as described in CLI:

pnpm dlx shadcn@latest add "https://www.jolocky.com/r/golden-hour.json?key=YOUR_LICENSE_KEY"

Use https://www.jolocky.com with www. The apex domain redirects, and that redirect drops the Authorization header used by the namespace setup.

The files are written to components/footers/aurora-drift/ (or src/components/footers/aurora-drift/ if your project uses a src directory). Footers are client components, so you can import them directly into a Server Component page or layout:

app/page.tsx
import { AuroraDriftFooter } from "@/components/footers/aurora-drift"
 
export default function Home() {
  return (
    <>
      <main className="min-h-screen">{/* Your page content */}</main>
      <AuroraDriftFooter />
    </>
  )
}

To change the text, links, colors, or fonts, see Theming.