Next.js Project

This is a Next.js project bootstrapped with create-next-app.

Table of Contents

• Next.js Project
  • Table of Contents
  • Getting Started
  • Install the dependencies:
  • Run the development server:
  • Project Structure
  • Features
  • Scripts
  • Development
  • Routes

Getting Started

First, clone the repository:

git clone https://github.com/your-username/your-repo.git
cd your-repo

Install the dependencies:

npm install
# or
yarn install
# or
pnpm install

Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying src/app/page.js. The page auto-updates as you edit the file.

Project Structure

.env.local
.eslintrc.json
.gitignore
.next/
package.json
postcss.config.mjs
README.md
src/
  app/
    components/
    docs/
    lib/
    middleware/
    models/
  app/
    api/
      otp/
        sendOtp/
          route.js
    home/
      page.js
    layout.js
    globals.css
tailwind.config.js

• env.local: Environment variables for local development.
• eslintrc.json: ESLint configuration file.
• gitignore: Specifies files and directories to be ignored by Git.
• next/: Contains build and cache files generated by Next.js.
• app-build-manifest.json: Manifest file for the app build.
• build-manifest.json: Manifest file for the build.
• cache/: Cache directory for images, SWC, and webpack.
• server/: Contains server-related files and manifests.
• static/: Contains static files.
• types/: Contains type definitions.
• components.json: Configuration file for UI components.
• jsconfig.json: Configuration file for JavaScript projects.
• next.config.mjs: Next.js configuration file.
• package.json: Contains project metadata and dependencies.
• postcss.config.mjs: Configuration file for PostCSS.
• README.md: Project documentation.
• src/: Source code directory.
• app/: Contains application-specific code.
• components/: Contains React components.
• docs/: Documentation files.
• lib/: Utility functions and libraries.
• middleware/: Middleware functions.
• middleware.js: Middleware configuration file.
• models/: Database models.
• tailwind.config.js: Configuration file for Tailwind CSS.

Features

• Next.js: Server-side rendering and static site generation.
• OTP Verification: Integrated OTP generation and verification using Fast2SMS API.
• Responsive UI: Designed with Tailwind CSS for responsive design.
• State Management: Efficient state management using React hooks.
• Database Integration: Connected to MongoDB using Mongoose.
• File Upload: Upload files to Vercel Blob and store metadata in MongoDB.
• Authentication: Middleware for route protection and token verification.

Scripts

• dev: Runs the development server.
• build: Starts the application for production.
• start: Starts the production server.
• lint: Runs ESLint to check for linting errors.

Development

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Routes

Public Routes

• /: Home page.
• /login: Login page.
• /register: Registration page.

Protected Routes

• /home: User's home page.
• /profile: User's profile page.
• /restaurant: Restaurant-related pages.

API Routes

• /api/upload: Handles file uploads.
• /api/otp/sendOtp: Sends OTP for verification.

Middleware

The middleware in src/middleware.js handles authentication and route protection. It verifies tokens for protected routes and redirects unauthenticated users to the login page.

import { NextResponse } from 'next/server';
import { verifyToken } from '@/lib/jwt';

export async function middleware(request) {
    const token = request.cookies.get('token')?.value;

    const protectedRoutes = ['/profile', 'restaurant', '/home'];
    const authenticationRoutes = ['/login', '/register', '/'];

    if (protectedRoutes.includes(request.nextUrl.pathname)) {
        if (token) {
            try {
                verifyToken(token);
                return NextResponse.next();
            } catch (error) {
                console.log("Invalid token, redirecting to register");
                return NextResponse.redirect(new URL('/login', request.url));
            }
        } else {
            console.log("No token found, redirecting to register");
            return NextResponse.redirect(new URL('/login', request.url));
        }
    }
    if (authenticationRoutes.includes(request.nextUrl.pathname)) {
        if (token) {
            try {
                verifyToken(token);
                return NextResponse.redirect(new URL('/home', request.url));
            } catch (error) {
                console.log("Invalid token, redirecting to register");
                return NextResponse.redirect(new URL('/', request.url));
            }
        } else {
            console.log("No token found, redirecting to register");
            return NextResponse.next();
        }
    }

    return NextResponse.next();
}

export const config = {
    matcher: ['/home', '/profile', '/restaurant', '/', '/register', '/login'],
};