Next.js

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

1. Create a Next.js Project#

If you do not already have an existing application, initialize a new Next.js project with Tailwind CSS and TypeScript:

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

2. Install Animation and Smooth Scroll Dependencies#

Jolocky kinetic sections utilize motion for layout and spring animations, along with lenis for smooth momentum scrolling:

pnpmnpmyarnbun
pnpm add motion lenis lucide-react clsx tailwind-merge
Copy

3. Configure components.json#

Initialize shadcn compatibility in your project if you haven't already:

pnpmnpmyarnbun
pnpm dlx shadcn@latest init
Copy

Verify that your components.json points to your CSS file (app/globals.css) and has tailwind.cssVariables set to true.

4. Install Your First Jolocky Section#

Run the add command to pull a section from the Jolocky registry:

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

If you are installing a Pro section, append your --token JOLOCKY-PRO-XXXX-XXXX flag.

5. Render the Section#

Import and render the component in your page:

Copyimport { AuroraDriftFooter } from "@/components/footers/aurora-drift"
 
export default function Home() {
  return (
    <main className="min-h-screen bg-background text-foreground">
      <AuroraDriftFooter />
    </main>
  )
}