This code has been modified to include Chakra UI and Clerk authentication.

You must first:

npm create-next-app@latest

Follow this set up:

✔ What is your project named? project-namehere
✔ Would you like to use TypeScript? "No"
✔ Would you like to use ESLint? "Yes"
✔ Would you like to use Tailwind CSS? "No"
✔ Would you like to use `src/` directory? "Yes"
✔ Would you like to use App Router? (recommended) "No"
✔ Would you like to customize the default import alias? "No"

Move into your project directory in the terminal.

Now we need to install both dependencies:

npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion

npm install @clerk/nextjs

Now copy the contents of this GitHub repo into your new repository.

You must visit clerk.com, create an account, create an application, and set up log in types (pref no email) to get your secret keys.

Keys go in .local.env

.local.env

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

To deploy on Vercel it is necessary to learn how to add environment keys. Then you must paste in your Clerk secret keys.

Be sure to edit the readme and remove the license if appropriate.

Below is the copy of the Nextjs default readme

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.