Integration

.env.local

Ensure that the API integration is enabled by setting the variable in the .env.local file. Change the value of NEXT_PUBLIC_IS_API_ACTIVE to "true" instead of "false". This configuration activates the API features within the application, allowing it to make requests to the backend and retrieve or send data as needed. By doing so, you ensure that the application is properly connected to the API, facilitating seamless communication between the frontend and backend services.

NEXT_PUBLIC_IS_API_ACTIVE = "true"

The src/utils/axios_api.ts file is responsible for managing all API interactions within the application. It centralizes the configuration and handling of HTTP requests using Axios, allowing for consistent and efficient communication with backend services. This file typically includes functions for making GET, POST, PUT, and DELETE requests, along with error handling and response processing. By organizing API calls in one location, it simplifies maintenance and enhances the scalability of the application.

src/utils/axios_api.ts

import axios from 'axios';

const api: any = axios.create({
    baseURL: process.env.NEXT_PUBLIC_BASE_URL, // This won't be used but gives a sense of structure
});

// Mock GET request -- get data
api.get = async (url: string) => {
  ...
};


// Mock POST request -- add data
api.post = async (api: string, newRecord: any, field?: string) => {
    const isApiActive = process.env.NEXT_PUBLIC_IS_API_ACTIVE === "true";
    let data: any = [];

    if (isApiActive) {
        try {
          ...

        } catch (error: any) {
           ...
        }
    } else {
      ...
    }
};

// Mock PUT request -- update data
api.put = async (api: string, updatedRecord: any, field?: string) => {
    const isApiActive = process.env.NEXT_PUBLIC_IS_API_ACTIVE === "true";
    let data: any = [];

    if (isApiActive) {
        try {
          ...
        } catch (error: any) {
            ...
        }
    } else {
        ...
    }

};

// Mock DELETE request -- delete data
api.delete = async (api: string, id: number, field?: string) => {
    const isApi = process.env.NEXT_PUBLIC_IS_API_ACTIVE === "true";

    if (isApi) {
        ...
    } catch (error: any) {
        ...
    } else {
      ...
    }
};

export default api;

src/utils/url_helper.ts

The src/utils/url_helper.ts file centralizes API endpoints, enhancing maintainability, readability, and consistency while simplifying environment configuration in the application.

export const NEXT_PUBLIC_SCHOOL_PARENTS_LIST = '/api/parents'

src/pages/api/parents/index.ts

The src/pages/api/parents/index.ts file effectively manages parent-related data using API endpoints for CRUD operations. By implementing GET, POST, PUT, and DELETE methods, it allows the frontend to interact seamlessly with the data, facilitating dynamic content management in the application.

import fs from 'fs';
import path from 'path';
import { NextApiRequest, NextApiResponse } from 'next';
import { Parents } from '@src/dtos';

const dataFilePath = path.join(process.cwd(), 'your json data path');

const readData = (): Parents[] => {
	...    
};


const writeData = (data: Parents[]) => {
    try {
        ...
    } catch (error) {
       ...
    }
};

export default function handler(req: NextApiRequest, res: NextApiResponse) {
    switch (req.method) {
        // Read and return the Parents data
        case 'GET':
           ...
            break;

        // Create a Parents record API
        case 'POST': {
            try {
               ...
            } catch (error) {
              ...
            }
            break;
        }

        // Update a Parents record API
        case 'PUT': {
            try {
               ...
            } catch (error) {
              ...
            }
            break;
        }

        // Delete a Parents record API
        case 'DELETE': {
            try {
              ...
            } catch (error) {
               ...
            }
        }

        default:
            res.setHeader('Allow', ['GET', 'POST', 'PUT', 'DELETE']);
            res.status(405).end(`Method ${req.method} Not Allowed`);
            break;
    }
}

This guide covers everything you need to know to make sure Tailwind generates all of the CSS needed for your project.