Next.js Full Stack Project

Objectives: Next.js Full Stack Project

First Next.js Project – Full Guide with File Structure

FIRST NEXT.JS PROJECT – COMPLETE HTML NOTES

1. Project Overview

This is a beginner-friendly Next.js project using the official App Router. The project combines frontend and backend in one application.

You will learn:

  • Official Next.js folder structure
  • How pages work
  • How navigation works
  • How backend API works
  • How frontend calls backend

2. Create the Project (Terminal)

npx create-next-app@latest nextjs-first-project
cd nextjs-first-project
npm run dev

Open browser: http://localhost:3000

3. Official Project Folder Structure

nextjs-first-project/
│
├── app/
│   ├── page.js
│   ├── layout.js
│   ├── globals.css
│   │
│   ├── about/
│   │   └── page.js
│   │
│   ├── api/
│   │   └── users/
│   │       └── route.js
│   │
│   └── components/
│       └── Navbar.js
│
├── public/
│   └── logo.png
│
├── package.json
└── next.config.js

4. Global Layout File

This file wraps all pages. It is used for common UI like navigation.

File: app/layout.js

import './globals.css'
import Navbar from './components/Navbar'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Navbar />
        <main>
          {children}
        </main>
      </body>
    </html>
  )
}

5. Global CSS

File: app/globals.css

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f4f7fb;
}

main {
  padding: 20px;
}

6. Navigation Component

This component is reused across pages.

File: app/components/Navbar.js

import Link from 'next/link'

export default function Navbar() {
  return (
    <nav style={{ padding: '15px', background: '#0b5ed7' }}>
      <Link href="/" style={{ color: '#fff', marginRight: '15px' }}>
        Home
      </Link>

      <Link href="/about" style={{ color: '#fff' }}>
        About
      </Link>
    </nav>
  )
}

7. Home Page (Frontend)

File: app/page.js

export default async function Home() {

  const response = await fetch('http://localhost:3000/api/users')
  const data = await response.json()

  return (
    <div>
      <h1>Welcome to My First Next.js Project</h1>
      <p>This page is rendered on the server.</p>

      <h3>Users from Backend:</h3>
      <ul>
        {data.users.map((user, index) => (
          <li key={index}>{user}</li>
        ))}
      </ul>
    </div>
  )
}

8. About Page

File: app/about/page.js

export default function About() {
  return (
    <div>
      <h1>About This Project</h1>
      <p>
        This is a simple Next.js project demonstrating
        frontend and backend together.
      </p>
    </div>
  )
}

9. Backend API Route

This file acts as the backend. It runs only on the server.

File: app/api/users/route.js

export async function GET() {
  return Response.json({
    users: ['Alice', 'Bob', 'Charlie', 'Diana']
  })
}

10. How Frontend and Backend Connect

  • Frontend page calls /api/users
  • Backend returns JSON
  • Page renders data as HTML
  • All inside one project

11. Why This Is an Official Structure

  • Uses App Router
  • Uses layout.js
  • Uses server components
  • Uses API routes
  • Recommended by Next.js team

12. Final Summary

This project proves that:

  • Next.js is frontend + backend
  • No separate server is required
  • Official structure is easy to follow
  • Perfect for beginners
Next.js Full Stack Project with Database

NEXT.JS FULL STACK PROJECT WITH DATABASE (COMPLETE)

1. Project Description

This project is a full-stack Next.js application that connects to a MySQL database. It demonstrates how Next.js handles:

  • Frontend UI
  • Backend logic
  • Database operations
  • CRUD functionality

2. Technologies Used

  • Next.js (App Router)
  • React
  • Prisma ORM
  • MySQL Database
  • Server Actions

3. Create Project

npx create-next-app@latest nextjs-db-project
cd nextjs-db-project
npm run dev

4. Install Database Tools

npm install prisma --save-dev
npm install @prisma/client
npx prisma init

5. Environment Configuration

File: .env

DATABASE_URL="mysql://root:password@localhost:3306/nextjs_db"

6. Official Project Structure

nextjs-db-project/
│
├── app/
│   ├── layout.js
│   ├── globals.css
│   ├── page.js
│   │
│   ├── users/
│   │   └── page.js
│   │
│   ├── api/
│   │   └── users/
│   │       └── route.js
│   │
│   └── actions/
│       └── userActions.js
│
├── prisma/
│   └── schema.prisma
│
├── lib/
│   └── prisma.js
│
├── package.json
└── .env

7. Prisma Database Schema

File: prisma/schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

model User {
  id    Int    @id @default(autoincrement())
  name  String
  email String @unique
}
    
npx prisma migrate dev --name init

8. Prisma Client

File: lib/prisma.js

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export default prisma

9. Global Layout

File: app/layout.js

import './globals.css'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <h2>Next.js Database App</h2>
        {children}
      </body>
    </html>
  )
}

10. Server Actions (Database Logic)

File: app/actions/userActions.js

'use server'
import prisma from '@/lib/prisma'

export async function createUser(formData) {
  await prisma.user.create({
    data: {
      name: formData.get('name'),
      email: formData.get('email')
    }
  })
}

11. API Route (Backend)

File: app/api/users/route.js

import prisma from '@/lib/prisma'

export async function GET() {
  const users = await prisma.user.findMany()
  return Response.json(users)
}

12. Home Page

File: app/page.js

import Link from 'next/link'

export default function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/users">Manage Users</Link>
    </div>
  )
}

13. Users Page (Frontend + Database)

File: app/users/page.js

import prisma from '@/lib/prisma'
import { createUser } from '../actions/userActions'

export default async function UsersPage() {
  const users = await prisma.user.findMany()

  return (
    <div>
      <h1>Users</h1>

      <form action={createUser}>
        <input name="name" placeholder="Name" required />
        <input name="email" placeholder="Email" required />
        <button type="submit">Add User</button>
      </form>

      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.name} - {user.email}
          </li>
        ))}
      </ul>
    </div>
  )
}

14. How Everything Works

  • Form submits data
  • Server Action saves to database
  • Prisma communicates with MySQL
  • Page fetches updated data
  • HTML is rendered on server

15. Final Summary

  • Next.js handles frontend + backend
  • Database is fully integrated
  • Official structure used
  • Production-ready approach
  • Perfect for real projects

Reference Book: N/A

Author name: MWALA_LEARN Work email: biasharabora12@gmail.com
#MWALA_LEARN Powered by MwalaJS #https://mwalajs.biasharabora.com
#https://educenter.biasharabora.com

:: 1::

⬅ ➡