# Effortless Secure Login & Signup in Minutes with Next.js and clerk ### **Prerequisites** Make sure you have: * **Node.js** (LTS version) installed * **npm** or **yarn** as a package manager * **Git** installed (optional but recommended) --- ### **Setting Up a Next.js Project** Open your terminal and run: ```bash npx create-next-app@latest my-clerk-app cd my-clerk-app ``` or using yarn: ```bash yarn create next-app my-clerk-app cd my-clerk-app ``` Start the development server: ```bash npm run dev ``` or ```bash yarn dev ``` Now, your Next.js project is ready! Next, we'll integrate Clerk for authentication. ### Integrating Clerk Create an account for clerk by going on [https://clerk.com/](https://clerk.com/) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739033535433/928b037f-23b6-4ae5-889d-fa1a4ee826a3.png align="center") Once you sign in you should see this. Select all the forms of authentication you want and click on Create application ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739033591102/096dc6f5-eb71-415d-b2f5-d3f05333fde0.png align="center") I simply follow the clerk’s instructions on how to install clerk and set up the env variables and setup the middle ware. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739033658151/51030784-adb8-46dd-b17b-b2a156447d5d.png align="center") I usually follow everything as clerk says until setting up the middleware part. for the clerk provider I like to do things slightly differently. * I like to create a separate folder in my `src` directory called providers * There i create a file called `index.tsx` where I create a component called providers and wrap the children of provider component into all the other providers which I’ll be using. **src/providers/index.tsx** ```typescript 'use client' import { ClerkProvider } from '@clerk/nextjs' import { nhost } from '../lib/nhost' interface ProviderProps { children: React.ReactNode } const Provider: React.FC = ({ children }) => { return ( {children} ) } export default Provider ``` * Then I use this provider component to wrap my main content. This helps me keep my code clean **src/app/layout.tsx** ```typescript import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; import Provider from "@/providers"; const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], }); const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } ``` * Then we can simply put the **signin** button on the **app/page.tsx** file like this. and run the project using yarn dev or npm run dev ```typescript import { SignedIn, SignedOut, SignInButton, UserButton } from "@clerk/nextjs"; export default function Home() { return (

Clerk Basic Setup

); } ``` You are all set. You have ready to use authentication system on which you can build upon. ### Results ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739036200714/86d00d45-f194-402d-9a39-8a7ac0e22a8c.png align="center") * Clicking on signup button will show you this which you can use to sign up ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739036324693/9ca8a251-42a5-4821-a177-2aaa293e3000.png align="center") On successful signup you can will be redirected to the same page which you were before than we can see that we can use the clerks in build account management. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739036375836/6b8b3768-6640-4637-b428-56c1f82aa183.gif align="center") we can check the dashboard and we’ll see that new account has been registered. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739036441003/6af04be9-b712-4f7b-af39-4272c149ec69.png align="center") Thanks for taking the time to read my blog! I’d love to hear your thoughts, feel free to share your feedback or ask any questions in the comments. Your input helps me improve and create better content. Until next time!