Installing Claude Code with Next.js

In this lesson, we will install Claude Code, create an account with Anthropic, and initialize our project. Let's get started.

The process of initializing and running Claude Code is quite simple. You only need to run an NPM script that installs the claude command, making it available for use across your machine.

npm install -g @anthropic-ai/claude-code

Find the Claude Code installation instructions here. This ensures that Claude Code can be used in any directory. Before proceeding, note that you need Node.js version 18 or higher. Since my system has an older version of Node installed for an older project, I will update it using the sudo n command. I will switch to a later version of Node by selecting the latest version I already have installed.

Once I have the proper node version, I’ll attempt to run the claude install again. If I encounter a permission error, I’ll resolve it by prefixing the command with sudo, then rerun the installation. The installation process should now begin.

After successful installation, we’ll refer to the documentation for the next steps. According to the docs, after installing Claude Code, we need to navigate to our project directory and simply run claude. This command launches Claude without requiring additional parameters.

Now, Claude prompts us with some setup instructions. It asks us to choose a text style, where I’ll select the default light text. Next, it prompts us to log into the Anthropic console. After hitting enter, follow the on-screen instructions to complete the login process. You’ll need to enter your name, select Individual, authorize the application, and purchase some credits (a $5 credit should be more than enough to get started). Once that’s done, return to the console, and you should be ready to go.

Now, we’ll initialize a Next.js project by running the command:

npx create-next-app@latest

During setup, I’ll select the following options:

• Use TypeScript → Yes
• Use Tailwind CSS → No
• Use the App Router and Turbo Pack → Yes

Once the installation is complete, I’ll open the folder inside Habit Tracker Claude and run: npm run dev.

As you can see, our Next.js app is now running. I’ll open a new terminal window so we can run claude alongside it.

Our first prompt:

I want to create a habit tracker application. Will you generate this for me inside my Next.js app?

Claude then creates the necessary files and folders. We’ll grant it permission to proceed, and it will generate a sample habits data model, a habit function, and other necessary components.

Once the process is complete, Claude provides a summary of the generated application.

The features include:

• A data model using TypeScript.
• A utility library for managing habits.
• UI components to display and interact with the habits.
• Styling for a visually appealing layout.
• Functionality to add, track, complete, delete habits, and view statistics.

Now, let’s test it. The UI displays the total habits, completion rate, and streaks. If I mark a habit (e.g., "Drink Water") as completed, it updates the count. However, refreshing the page reveals that the state is only stored locally in React and not persisted.

Testing further, deleting a habit and refreshing the page confirms that the deletion was not saved either. When adding a new habit (e.g., "Write Code" with a frequency of monthly), it appears alongside the existing habits.

Overall, I’m really happy with the generated UI. It provides essential features like streaks, frequency tracking, and useful statistics. This is a great starting point, and I wouldn’t have thought to implement this exact UI layout myself. Now, let's explore the actual code behind it and see how we can refine and expand its functionality.