Inayam LogoInayam
Back to all posts
technologyweb-development

Getting Started with Next.js

A comprehensive guide to setting up your first Next.js project

AadhiMahi
January 15, 2025
8 min
beginnertutorialnextjs

Getting Started with Next.js: A Friendly Introduction

If you’ve been dabbling in web development lately, there’s a good chance you’ve come across Next.js. It’s a popular React framework that has been making waves for its simplicity and powerful features. But if you’re wondering what exactly makes Next.js worth your time — especially if you’re already familiar with React — you’re in the right place. I’m going to walk you through what Next.js is, why it matters, and how you can get started with it without feeling overwhelmed.

So, What Is Next.js Anyway?

In simple terms, Next.js is a React framework built by Vercel that helps you build web applications with ease. Think of it like React’s helpful big sibling — it seamlessly handles some of the trickier parts of building React apps so you can focus on building your UI and logic.

Here’s the catch: React by itself is great for building interactive components, but you often need extra setups to:

  • Manage routing between pages.
  • Render pages on the server for faster load times.
  • Optimize your app for SEO.
  • Bundle and optimize your code for production.

Next.js comes into play by providing solutions for all these, out of the box.

Why Should You Care About Next.js?

You might be thinking: “I already know React; why learn another framework?” Fair question. Here’s the deal:

  • Automatic Routing: Next.js treats every file inside the pages folder as a route. You don’t have to fiddle with React Router or set up complex routing logic. Create a file about.js in pages and boom — you have an /about page.

  • Server-Side Rendering (SSR) and Static Generation: Unlike traditional React apps that render components purely on the client side, Next.js can pre-render pages on the server, which means faster page loads and better SEO.

  • Built-in API Routes: Need backend functionality? You can write serverless functions right in your Next.js app under the api folder without juggling a separate backend.

  • Performance Optimizations: Next.js optimizes images, splits your code smartly to reduce load times, and takes care of many things behind the scenes.

If those perks sound good — they really do make your dev life easier — let’s move on to getting a Next.js project up and running.

Setting Up Your First Next.js App

Here’s where the rubber meets the road. You’ll need Node.js installed on your machine. If you haven’t got it yet, head over to nodejs.org and grab the latest stable version.

Once that’s done, open your terminal and run:

npx create-next-app@latest my-nextjs-app

A quick note: npx lets you run this package without installing it globally. create-next-app is the official starter template for Next.js, and my-nextjs-app is your project folder name — you can change this however you like.

The CLI will ask you a couple of questions:

  • Would you like to use TypeScript?
  • Would you like to use ESLint?
  • Various other configurations.

You can go with the defaults or customize as per your preferences. Once it’s done, navigate into your project folder.

cd my-nextjs-app

And start the development server:

npm run dev

(or yarn dev if you prefer Yarn)

Open your browser and visit http://localhost:3000. You’ll see the default Next.js welcome page, which means you’re good to go!

Exploring the Project Structure

Here’s a quick look at some key folders and files:

  • /pages — This is the heart of your routing system. Each .js or .tsx file here corresponds to a page.

  • /public — For static assets like images or fonts accessible by URL.

  • /styles — Your CSS files. By default, Next.js supports CSS Modules.

  • next.config.js — Configuration file if you need custom settings.

The probably most magical folder here is /pages. Let me show you what makes it stand out.

Adding Your First Page

Inside /pages, you’ll find index.js. This is your homepage. Go ahead and open it in your preferred code editor. You can customize the component like so:

export default function Home() {
  return (
    <div>
      <h1>Hello, Next.js!</h1>
      <p>Welcome to your first Next.js app.</p>
    </div>
  )
}

Save it and check your browser — your homepage will update instantly. This is hot reloading in action, which means no page refresh needed.

To add a new page, say an About page, create a file about.js in the pages folder:

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page of your Next.js app.</p>
    </div>
  )
}

Now, if you go to http://localhost:3000/about, there it is! Your new route with just a file creation. No routing config required.

How Does Server-Side Rendering Work?

This might sound magical — and it kinda is. When you open a Next.js page in your browser, the server sends a fully rendered HTML page. This results in faster load times and is great for SEO because search engines prefer pre-rendered HTML.

Next.js lets you pick how to pre-render your pages:

Static Generation (SSG): Render at build time. Great for pages that don’t change often.
Server-Side Rendering (SSR): Render on each request. Useful for dynamic content.

You can add some special exported functions to your pages to utilize these features. For example, getStaticProps for static generation or getServerSideProps for SSR.

I won’t dive too deep right now, but just know these tools mean you have a lot of options to optimize your app.

Adding Styling

Okay, so your app works — but how about some style? Next.js supports CSS Modules by default, which lets you scope styles to components.

Inside /styles, you might see Home.module.css. Open or create your own CSS module, for example:

/* styles/Button.module.css */
.button {
  background-color: teal;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
}

Then use it in your component like this:

import styles from '../styles/Button.module.css'

export default function Button() {
  return <button className={styles.button}>Click me</button>
}

This keeps styles isolated and avoids name clashes — a common headache in frontend. What About API Routes?

Sometimes your frontend needs to talk to a backend. Next.js has you covered with API routes — serverless functions inside the same project.

Create a folder api inside pages, like:

/pages/api/hello.js:

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' })
}

Wrapping It Up: What’s Next?

Next.js is more than just a React wrapper. It offers an elegant structure and so many tools to streamline building modern web apps.

From what you’ve seen so far:

  • Set up your project quickly.
  • Add pages with automatic routing.
  • Enjoy fast initial loads with server-side rendering.
  • Write backend API routes inside your frontend app.
  • Style your components with scoped CSS.

This is just the beginning. Next.js also supports:

  • Image optimization.
  • Internationalization.
  • Incremental Static Regeneration.
  • Middleware and more.

If you want to dive deeper, the official docs at nextjs.org are excellent and beginner-friendly.

Final thoughts: Starting out with Next.js can feel a bit like stepping into a new city — exciting and maybe a little confusing. But once you get your bearings, you realize it’s designed to help you build faster, better web apps with less hassle.

So go ahead, build something cool. The community is vibrant, the tools are slick, and the possibilities? Well, they’re pretty awesome.

Good luck on your Next.js journey!

If you found this helpful, share it with a friend who might be curious about React frameworks. And if you want me to cover specific Next.js topics, just let me know!