First Experience with Claude Code
In this chapter, we'll finally use Claude Code to edit Next.js applications.
Claude Code - An Era Where Programming is Done Just by Talking to AI
Claude Code functions as a "chatbot that can talk to your computer files."
Just like ChatGPT, you simply give instructions in natural language, and Claude Code writes code for you.
Even without knowing technical details, you get an experience as if an experienced engineer is right beside you, providing dedicated support.
Claude Code isn't just a simple code generation tool. It supports all development-related work including code creation, bug discovery, explanations, refactoring, and test creation.
Let's launch Claude Code and actually use it.
Launching Claude Code
In the Codespaces environment, open the terminal. First, run the following command to launch Claude Code. If Claude Code gives operational instructions, you can navigate using arrow keys and return (enter).
npm install -g @anthropic-ai/claude-code
claudeAfter executing the command, complete the setup following these steps.
Press return to select your preferred UI theme.
Press return to select "Claude account with subscription."
You'll get instructions to navigate to an external site, but connection will be rejected, so cancel here.
Return to the terminal and click the displayed link.
Press Authorize.
An Authentication Code will be displayed. Copy that code, return to the Codespaces screen, paste it, and press return. Upon successful login, the following screen will appear.
Follow the instructions and proceed with the operation. When you reach the following screen, Claude Code is ready to run.
Practical Exercise - Let's Run Claude Code
One of Claude Code's most convenient features is file referencing using the @ notation.
When you input @ in Claude Code, it displays a list of files in the current project. When you select a file you want to reference, Claude Code automatically incorporates the file's content into context.
For example, if you input @app/page.tsx, the page.tsx file content gets loaded into Claude Code, and you can ask questions about that file or give editing instructions.
@app/page.tsx What processing is being performed in this file? Please explain.Basic Principles for Communicating with Claude Code
There are basic principles for communicating more effectively with Claude Code.
The most important principle is setting clear goals. The official documentation states, "Claude performs best when it has a clear target to iterate against."
Rather than vague instructions, specific instructions like "Display sales data as a bar chart with months on the X-axis and sales amounts on the Y-axis" allow Claude Code to provide superior results.
Utilizing the CLAUDE.md file is also an important element.
This file is a configuration file that Claude Code automatically reads at startup, serving to convey project context to the AI.
In the CLAUDE.md file, first list the technology stack (libraries used and versions). Next, explain the project structure (directory composition and file roles), and it's effective to include frequently used commands and code style rules.
What's important is writing "only necessary things concisely." If there's too much information, Claude Code might ignore important content.
By giving clear and specific instructions, Claude Code will provide results that meet expectations.
Review and Next Steps
Up to this point, you've mastered the basic usage of Claude Code.
You've overcome fear of the terminal interface and learned effective communication methods with your AI development partner. You've leveraged editor integration features and become able to edit programs using natural language.
Basic skills learned this time:
- Launching Claude Code
- File referencing functionality using @ notation
- How to give clear instructions
These skills will serve as the foundation for future learning.
In the next chapter, we'll have Claude Code generate code to build a basic dashboard. Let's apply this knowledge and take on more practical development challenges.