Next.js Level 00

Generate NextJS Project

Open the terminal and run the following command to generate the project. Then, start the project with npm run dev

npx create-next-app next-v01

This is the output after running the project.

You can now access the app at http://localhost:3000/

Create the first page

• Open the page.tsx file located at nextjs-0/app/page.tsx and delete all its content. Then, use the rfce shortcut to generate the following code.

import React from 'react'

function page() {
  return (
    <div>page</div>
  )
}

export default page

Core concept of Next.js Routing

Next.js provide a file-based routing system, meaning the structure of your project's app or pages directory determines the routes of your application.

Here are the key concepts:

1. App Router vs Pages Router
2. File-Based Routing
3. Dynamic Routes
4. Catch-All Routes (...)
5. Layouts & Nested Routing
6. API Routes (For Pages Router)
7. Middleware (Edge Functions)

Example: Next.js App Router with File-Based Routing, Layouts, and Middleware

app/
├── layout.tsx          # Global layout
├── page.tsx            # Home page (/)
├── dashboard/
│   ├── layout.tsx      # Dashboard layout
│   ├── page.tsx        # Dashboard home (/dashboard)
│   ├── settings/
│   │   ├── page.tsx    # Settings page (/dashboard/settings)
├── middleware.ts       # Middleware for authentication

Routing has a lot of details, so i will create a seperate article for it, in this content, i will focus on heloping you get started with the project first.

Time to real implementation

This is my requirement, we would like to create the app routing following the structure below.

/app
 ├── /about
 │    └── page.tsx              # http://localhost:3000/about
 ├── /info
 │    ├── page.tsx              # http://localhost:3000/info
 │    └── [id]                  # Dynamic route for params
 │         └── page.tsx         # http://localhost:3000/info/123456
 ├── /_folder                   # Private Folder (no public access)
 ├── /(auth)                    # Groups Folder (e.g., for authentication)
 │    ├── /login
 │    │    └── page.tsx         # http://localhost:3000/login
 │    ├── /[...sign-in]         # Catch-all route (params)
 │    │    └── page.tsx         # http://localhost:3000/sign-in
 │    └── /register
 │         └── page.tsx         # http://localhost:3000/register

Create About page

1. Create an about folder inside the app directory
2. Add a page.tsx file inside this folder.
3. Use the rfce shortcut to generate the following code, then rename the function name from page to AboutPage. You can access the page at http://localhost:3000/about

import React from 'react'

function AboutPage() {
  return (
    <div>AboutPage</div>
  )
}

export default AboutPage

Create camp and info page

You can use the same approach as the create About page to create these pages.

You can access the page at http://localhost:3000/camp

import React from 'react'

function CampPage() {
  return (
    <div>CampPage</div>
  )
}

export default CampPage

You can access the page at http://localhost:3000/info

import React from 'react'

function InfoPage() {
  return (
    <div>InfoPage</div>
  )
}

export default InfoPage

Create Nav bar

We use the navbar to navigate to other pages. In short, using a navbar for navigation enhances usability, accessibility, and the overall experience in web applications.

Add Navbar with Tailwind css

      <nav>
        <div className='flex gap-4 text-2xl'>
          <Link href='/'>Home</Link>
          <Link href='/about'>About</Link>
          <Link href='/info'>Info</Link>
        </div>
      </nav>

Add to app/page.tsx

//rfce
import Link from 'next/link'
import React from 'react'

function page() {
  return (
    <div>
      <nav>
        <div className='flex gap-4 text-2xl'>
          <Link href='/'>Home</Link>
          <Link href='/about'>About</Link>
          <Link href='/info'>Info</Link>
        </div>
      </nav>
    </div>
  )
}

export default page

Add to app/about/page.tsx , app/camp/page.tsx, app/info/page.tsx

import Link from 'next/link'
import React from 'react'

function InfoPage() {
  return (
    <div>
      <nav>
        <div className='flex gap-4 text-2xl'>
          <Link href='/'>Home</Link>
          <Link href='/about'>About</Link>
          <Link href='/info'>Info</Link>
        </div>
      </nav>
      InfoPage</div>
  )
}

export default InfoPage

import Link from 'next/link'
import React from 'react'

function CampPage() {
  return (
    <div>
      <nav>
        <div className='flex gap-4 text-2xl'>
          <Link href='/'>Home</Link>
          <Link href='/about'>About</Link>
          <Link href='/info'>Info</Link>
        </div>
      </nav>
      CampPage</div>
  )
}

export default CampPage

import Link from 'next/link'
import React from 'react'

function AboutPage() {
  return (
    <div>
      <nav>
        <div className='flex gap-4 text-2xl'>
          <Link href='/'>Home</Link>
          <Link href='/about'>About</Link>
          <Link href='/info'>Info</Link>
        </div>
      </nav>
      AboutPage
    </div>
  )
}

export default AboutPage

This is the result after adding the navbar.

To summarize, today we started by generating a Next.js project and explored the basics of routing, along with a simple lab to test routing functionality.

In the next article, we will begin creating basic components to help us understand the working principles and the concept of SSR (Server-Side Rendering).