Guides

Justd Blocks Docs: Next.js

Learn how to integrate Justd Blocks into your Next.js projects to build high-performance, server-rendered, and statically generated applications effortlessly.

Installation

The installation process is straightforward and easy to follow. Just follow the steps below to get started:

1
Initial setup

Run the following command in your terminal:

npx justd-cli@latest init

By executing this command, you'll be guided through selecting the framework you wish to use. Justd Blocks supports Laravel, Next.js, Remix, and Vite.

? No setup project detected. Do you want to start a new project? (Y/n) Yes
? Which framework do you want to use?
Laravel
❯ Next.js
Remix
Vite

Because this is a Next.js, you'll need to specify the type of Next.js project you want, such as whether to include a src folder. You'll also need to select the Tailwind CSS version. Since Tailwind v4 is required, make sure to select yes to proceed.

? No setup project detected. Do you want to start a new project? (Y/n) Yes
? Which framework do you want to use? Next.js
? What is your project named? my-app
? Do you want to have a src folder? (Y/n) Yes
? Do you want to use Tailwind version 4? (Y/n) Yes
? Do you want to use Prettier for this project? (Y/n) Yes
? Which package manager do you want to use? (Use arrow keys)
❯ Bun
Yarn
npm
pnpm

If everything is set up correctly, you'll see something like this:

✔ Creating Next.js project.
✔ Upgrading to Tailwind CSS v4.
✔ Setting up Prettier.
✔ Finishing.
 
Project setup is now complete.
Start your development server by running: `cd my-app && npm run dev`
 
Ready to customize your project?
Add new components by running: `npx justd-cli@latest add`

2
File and Folder

Once the installation is complete, your project structure will include folders like components/ui, utils, and a justd.json file.

├── src
│   ├── app
│   │   ├── favicon.ico
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components
│   │   ├── providers.tsx
│   │   ├── theme-provider.tsx
│   │   └── ui
│   │       ├── index.ts
│   │       └── primitive.tsx
│   └── utils
│       └── classes.ts
└── justd.json

3
Providers

Inside the components folder, you'll find providers.tsx and theme-provider.tsx files.

src/components
├── providers.tsx
├── theme-provider.tsx
└── ui
├── index.ts
└── primitive.tsx

To use the provider, import it into your layout.tsx file.

Loading source code...

4
Done

You're now ready to start creating your blocks.

Next.js

If you’d like to explore the Justd Starter Kit, visit the GitHub repository at justdlabs/next.js. This repository provides a fully functional Next.js project with Justd pre-installed and configured, complete with a variety of components and utilities.