I still remember when I first tried setting up a Next.js project. I thought, “How hard could it be?” I’d been using React for a while, so I figured this would be just another flavor. I opened my terminal with high hopes and within five minutes, I had no idea what I was doing.
Spoiler: it’s actually not hard at all. I just didn’t have a clear, no-nonsense guide. So here’s the one I wish I had plain English, step-by-step, no jargon overload.
Step 1: Make Sure You’ve Got Node.js
Before anything else, check that Node.js is installed. Without it, you’re not going anywhere. Type this in your terminal:
node -v
If you see a version number, you’re good to go. If not, head to https://nodejs.org and download it. The LTS version is usually the safer bet unless you have a reason to go with something newer.
Step 2: Create a New Next.js App
This is where the magic starts. Open your terminal and run:
npx create-next-app@latest my-nextjs-app
Replace my-nextjs-app with whatever you want to call your project.
You’ll be asked a few questions like if you want to use TypeScript or include Tailwind CSS. Answer them based on what you need. If you’re unsure, go with the defaults. You can always add features later.
Once it’s done, jump into your project folder:
cd my-nextjs-app
Step 3: Start Your Local Server
You’ve got a shiny new project now. Let’s see it in action.
npm run dev
Then open your browser and go to http://localhost:3000. You should see the default Next.js welcome page.
Feels pretty good, doesn’t it?
Step 4: Understand the File Structure (Without Falling Asleep)
Here’s a quick breakdown of what you’ll see in your new project:
- pages/: This is where your routes live. Create a file called about.js, and boom you’ve got a page at /about.
- public/: Static files like images go here.
- styles/: Your CSS files live here.
- next.config.js: Where advanced config stuff goes (you probably won’t need it right away).
No need to memorize everything. You’ll pick it up as you build.
Step 5: Try Making a New Page
Here’s a quick win. Make a new file inside pages/ called hello.js, and paste this in:
export default function Hello() {
  return <h1>Hello, Next.js!</h1>;
}
Save it. Then head to http://localhost:3000/hello in your browser.
Congrats you’ve made your first custom page.
Step 6: Install Extra Stuff (If You Want To)
A few add-ons you might want down the line:
- Tailwind CSS: For styling without the pain.
- ESLint: Helps you write cleaner code.
- Prettier: Keeps formatting consistent.
You can add these with a quick command or two. But if you’re new, keep it simple. Get comfortable first, then add layers.
Real Talk: Things Might Break, and That’s Okay
At some point, you’re going to get a weird error or hit a wall. Happens to everyone. Don’t panic. Google the error message, check GitHub issues, or ask a question on Stack Overflow. Most bugs aren’t as scary as they seem once you understand them.
Wrapping Up Without Wrapping Up
And just like that, you’ve got a Next.js project up and running. No lectures, no complicated setups, no drama.
What matters most is getting hands-on. Break stuff. Try things. Build something dumb just for fun. The more you tinker, the more it makes sense.
