NextJs Starter

By Kshitij Akarsh•May 5, 2025

Next.jsReactWeb Development

After working with React for a while, I decided to explore what the hype around Next.js was all about. I kept hearing terms like "server-side rendering," "file-based routing," and "zero-config," and figured it was time to try it out for myself.

At first glance, Next.js felt familiar — it's built on top of React after all — but the developer experience is quite different. Some of its features made immediate sense, while others took a bit of digging (and breaking things) to fully understand.

This post is a beginner's take on getting started with Next.js — getting started with making a small project like a login and signup page, along with how redirection works in Next.js and understanding the file structure.

Installation :

npx create-next-app@latest appname

after running this command, a project is setup :

$ cd appname
$ ls
eslint.config.mjs  node_modules  postcss.config.mjs  src
next-env.d.ts      package-lock.json  public  tsconfig.json
next.config.ts      package.json       README.md

we write our code, design the pages and take care of the routing in the "src" folder.

src/
└── app/
    └── page.tsx
    └── layout.tsx
    └── global.css

Creating a New Component for the /login Route

File Structure for the new page will look like this:

src/
└── app/
    └── login
        └── page.tsx
    └── page.tsx
    └── layout.tsx
    └── global.css

Next.js uses the App Router, which makes routing super simple. The files and folders inside the app/ directory define your routes automatically.

Inside the page.tsx which is present inside the login folder we will write the contents of our login page:

import { useState } from 'react';

const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Assuming login is successful, redirect to home
  };

  return (
    <div>
      <h2>Login</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="email">Email</label>
          <input
            type="email"
            id="email"
            name="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
          />
        </div>
        <div>
          <label htmlFor="password">Password</label>
          <input
            type="password"
            id="password"
            name="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
          />
        </div>
        <button type="submit">Log in</button>
      </form>
    </div>
  );
};

export default Login;

Creating a Signup Page

Now that we've got a basic login page ready, let's create the signup page. The way to do it is pretty much the same, create new folder named signup and a file page.tsx inside it.

src/
└── app/
    └── signup/
        └── page.tsx

Now since the page.tsx is ready let's write the code inside it.

import { useState } from 'react';

const Signup = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
  };

  return (
    <div>
      <h2>Signup</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="email">Email</label>
          <input
            type="email"
            id="email"
            name="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
          />
        </div>
        <div>
          <label htmlFor="password">Password</label>
          <input
            type="password"
            id="password"
            name="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
          />
        </div>
        <button type="submit">Sign up</button>
      </form>
    </div>
  );
};

export default Signup;

Dynamic Routing in Next.js

Now let's talk about dynamic routing. Next.js makes dynamic routing super easy with its file-based routing system.

To demonstrate this, we'll create a simple dynamic route to display a user's profile page.

src/
 └── app/
      └── profile/
           └── [id]/
                └── page.tsx

Notice how we create the [id] folder, it's wrapped inside bracket [], that is how routes are made dynamic. So when you visit /profile/123, it will display contents related to that page.

import { useRouter } from 'next/router';

const Profile = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h2>User Profile</h2>
      <p>Displaying profile for user: {id}</p>
    </div>
  );
};

export default Profile;

Bringing it All Together

Now we have two main features: login and signup pages, along with dynamic routing for a user profile page. Here's a quick summary of the file structure:

src/
 └── app/
      └── login/
           └── page.tsx
      └── signup/
           └── page.tsx
      └── profile/
           └── [id]/
                └── page.tsx
      └── page.tsx
      └── layout.tsx
      └── global.css

This structure allows us to handle routing and display different pages based on dynamic parameters with ease. With the power of Next.js, you can build dynamic, scalable web apps with just a few simple files !