Next.js API

Utilizing Next.js API Routes in Our Template

Introduction

Next.js API routes offer a user-friendly way to construct APIs within your Next.js application. These routes enable you to design server-side logic and API endpoints directly inside your app. For comprehensive details on API routes, refer to the Next.js documentation.

Note

If you are not utilizing multiple languages in your app, you can bypass the [lang] folder in the src/app/[lang]/**/** path.

Steps to Create an API Route

Setting Up the Location: API routes reside in the src/app/api folder. To establish a new API route, create a new file within this directory.
Managing the Data: Data for the API routes is located in the src/fake-db folder by default. You can use your own database and API endpoints. Refer how you can use your own database and API endpoints and how you can remove the fake-db here
Configuring the Routing: Routes and API endpoints are managed in the src/app/[lang]/ folder. You're encouraged to develop your API endpoints within this area.

Creating an Example API Route:

Data File: Create a data file at src/fake-db/**/example/example.tsx

import type { ExampleType } from '@/types/**/exampleTypes'

export const db: ExampleType[] = [
  {
    userId: 1,
    id: 1,
    title: 'delectus aut autem',
    completed: false
  }
  ...
]

Data Type: Define the data types in src/types/**/exampleTypes.tsx file

export type ExampleType = {
  userId: number
  id: number
  title: string
  completed: boolean
}

API Routes: Establish your API routes in src/app/api/**/example/routes.ts file

// Next Imports
import { NextResponse } from 'next/server'

// Data Imports
import { db } from '@/fake-db/**/example'

export async function GET() {
  return NextResponse.json(db)
}

API Endpoints: Define your API endpoints in src/app/[lang]/**/**/example/page.tsx file

import type { ExampleType } from '@/types/**/exampleTypes'

const getExampleData = async () => {
  // API_URL variable is defined in .env file
  const res = await fetch(`${process.env.API_URL}/**/example`)

  if (!res.ok) {
    throw new Error('Failed to fetch data')
  }

  return res.json()
}

const ComponentName = async () => {
  // Vars
  const data: ExampleType[] = await getExampleData()

  return (
    <div>
      <h1>ComponentName</h1>
      {data.map(item => (
        <div key={item.id}>
          <div>{item.title}</div>
          <div>{item.completed}</div>
        </div>
      ))}
    </div>
  )
}

export default ComponentName

Finalizing Your API Route:
After completing these steps, your data is ready to be manipulated as required.
Your new API route will be accessible at http://localhost:3000/**/**/example.

That's it!!! You have successfully created your API route. 🥳 🎉

Next.js API

Utilizing Next.js API Routes in Our Template​

Introduction​

Steps to Create an API Route​

Utilizing Next.js API Routes in Our Template

Introduction

Steps to Create an API Route