This guide will walk you through setting up a full-stack Next.js application with Node.js, Visual Studio Code, Postman for testing, Shadcn/UI for components, and Clerk for authentication.
Before you begin, ensure you have the following installed on your machine:
-
Create a folder in your desired location.
-
Open a terminal in the folder and run the following command:
npx create-next-app@latest
-
You will be prompted with the following options. For this guide, select "yes" for Tailwind CSS and App Router.
What is your project named? my-app Would you like to use TypeScript? No Would you like to use ESLint? Yes Would you like to use Tailwind CSS? Yes Would you like to use `src/` directory? No Would you like to use App Router? (recommended) Yes Would you like to customize the default import alias (@/*)? No
- Open Visual Studio Code.
- Open the folder you created and navigate to
app/page.js. - Replace the default HTML code with your desired content.
-
In the terminal, run:
npm run dev
-
Your application will be available at
http://localhost:3000.
-
Run the following command to install Shadcn/UI:
npx shadcn-ui@latest init
-
Select the following options:
Which style would you like to use? › Default Which color would you like to use as base color? › Neutral Do you want to use CSS variables for colors? › Yes -
Refer to the Shadcn/UI documentation for further details on using components.
-
Sign up at Clerk.
-
Create a new application in the Clerk dashboard and configure social media login options.
-
Install Clerk in your project:
npm install @clerk/nextjs
-
Copy the
.envvariables provided by Clerk and create a.env.localfile in your project. -
Create a
middleware.jsfile in your root folder and add the following code:import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'; const isProtectedRoute = createRouteMatcher([ '/dashboard(.*)', '/forum(.*)', ]); export default clerkMiddleware((auth, req) => { if (isProtectedRoute(req)) auth().protect(); }); export const config = { matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'], };
-
Update
layout.jsto includeClerkProvider:import { ClerkProvider } from "@clerk/nextjs"; <ClerkProvider> <html lang="en"> <body className={inter.className}>{children}</body> </html> </ClerkProvider>
-
Protect routes by following the Clerk middleware documentation.
-
Create a
dashboardfolder in theappdirectory withlayout.jsxandpage.jsx:layout.jsx
import React from 'react'; const DashboardLayout = ({ children }) => { return <div>{children}</div>; }; export default DashboardLayout;
page.jsx
import React from 'react'; const Dashboard = () => { return <div>Dashboard</div>; }; export default Dashboard;
-
Test the route by navigating to
http://localhost:3000/dashboard. It should redirect to the sign-up page if not logged in.
-
Create a folder named
authinside theappdirectory. -
Create
sign-up/[[...sign-up]]/page.jsxwith the following code:import { SignUp } from "@clerk/nextjs"; export default function Page() { return <SignUp />; }
-
Create
sign-in/[[...sign-in]]/page.jsxwith the following code:import { SignIn } from "@clerk/nextjs"; export default function Page() { return <SignIn />; }
-
Update
.env.local:NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
-
Restart the development server:
npm run dev
Now your application should have authentication with Clerk and be running on http://localhost:3000.