How to Install Shadcn with Next.js 14: A Step-by-Step Guide
by SWHabitation
Fastness means using the best and most up-to-date tools and frameworks in the ever-fast-developing web development world at your fingers.
Next.js 14 stands as a robust and go-to powerhouse for building React apps—every developer's MUST-HAVE in their kit. But what if you could supercharge your Next.js project with a sleek, modern UI library like Shadcn? You're in luck!
Why Shadcn and Next.js 14?
But before we dive into the installation process, let's cover quickly why Shadcn and Next.js 14 make a perfect pair.
Next.js 14 provides a strong base for server-side rendering, static site generation, and client-side React applications. Then there is the power of the UI component library called Shadcn.
Similarly, you will be able to create a high performance and beautiful UI-based application, and at the same time, enable scalability.
Prerequisites
Before you begin, be sure you have the following.
- Background knowledge of React and Next.js.
- You are expected to have Node.js installed in your system, preferably the latest version.
- Install a package manager like npm or yarn.
- Code editor like Visual Studio Code.
Step 1: Setting Up a New Next.js 14 Project
First, we are going to create a new Next.js 14 project. Open your terminal and run this command:
1
2
npx create-next-app@latest my-shadcn-app
cd my-shadcn-appThis command will scaffold a new Next.js project for you. After the setup is complete, navigate into your project directory and start the development server:
1
npm run devYou should now be seeing your new Next.js app running locally at http://localhost:3000. You have just created a brand-new Next.js 14 project.
Step 2: Installing Shadcn
Now that you have Next.js 14 up and running, it's time to install Shadcn. You can do this quite easily by using npm or yarn. Run the following in the root of your project:
Using npm:
1
npm install shadcnUsing yarn:
1
yarn add shadcnThere you go! Shadcn is installed in your project; however, this isn't the end. Envision integrating it with your Next.js App.
Step 3: Integrating Shadcn with Next.js 14
First, to use Shadcn, you need to import its elements and into the Next.js pages. Modify pages/index.js to add a Shadcn button:
1
2
3
4
5
6
7
8
9
10
import { Button } from 'shadcn';
export default function HomePage() {
return (
<div>
<h1>Welcome to My Shadcn App</h1>
<Button>Click Me</Button>
</div>
);
}Save the file, flip over to the browser, and refresh that page. Voilà! A brand new, shiny button from Shadcn!
Step 4: Customizing Shadcn Components
Shadcn components are designed to be easily modified, so you can make your application exactly the way you want it to be. Now let's make a few adjustments to the button we've just added using Tailwind CSS:
1
2
3
4
5
<Button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Custom Styled Button
</Button>You have only taken a few classes, yet this bland default button is now a nicely styled component for any design.
Step 5: Deploying Your Next.js 14 Project
Once you have a Next.js 14 app satisfied and Shadcn integration, it's time to deploy! Next.js makes that pretty easy. Even more so with Vercel. Here's how to do it:
Install the Vercel CLI (if you haven’t already):
1
npm install -g vercelDeploy your project:
1
vercel --prod
Just follow the on-screen instructions, and in just a few moments, your app will be live on the web!
Conclusion
In this post, we ran through steps to set up a Next.js 14 project, installed Shadcn, integrated it into your app, and finally deployed your project. You now have the backbone that joins the power of Next.js 14 with the flexibility of Shadcn to build breathtakingly amazing ultra-high-performance web apps.
Remember, this is just the beginning! Research more Shadcn components, try more Next.js features, and take your projects to the next level.
