A. Instalasi Package

1. Instalasi axios

terminal

npm install axios
npm install react-spinners --save
npm install sweetalert2 -- save
npm i @heroicons/react -- save
npm i @react-spring/web

package.json

{
  "name": "frontend-nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3010",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^2.0.18",
    "@react-spring/web": "^9.7.3",
    "@types/node": "20.4.5",
    "@types/react": "18.2.17",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.14",
    "axios": "^1.5.0",
    "clsx": "^2.0.0",
    "eslint": "8.46.0",
    "eslint-config-next": "13.4.12",
    "next": "13.4.12",
    "postcss": "8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-spinners": "^0.13.8",
    "sweetalert2": "^11.7.27",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6"
  }
}

Setup axios

lib/axiosClient.ts

import axios, { AxiosInstance } from "axios";

export const axiosClient: AxiosInstance = axios.create({
  baseURL: "http://localhost:5002",
  headers: { "Content-Type": "application/json" },
});

export interface BaseResponsePagination {
  status: string;
  message: string;
  pagination: {
    page: number;
    limit: number;
    pageSize: number;
    total: number;
  };
}

Dokumentasi axios

Pelajari Selengkapnya di https://axios-http.com/docs/intro

2. Instalasi formik dan yup

terminal

npm install formik yup --save

package.json

{
  "name": "frontend-nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3010",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^2.0.18",
    "@react-spring/web": "^9.7.3",
    "@types/node": "20.4.5",
    "@types/react": "18.2.17",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.14",
    "axios": "^1.5.0",
    "clsx": "^2.0.0",
    "eslint": "8.46.0",
    "eslint-config-next": "13.4.12",
    "formik": "^2.4.3",
    "next": "13.4.12",
    "postcss": "8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-spinners": "^0.13.8",
    "sweetalert2": "^11.7.27",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6",
    "yup": "^1.2.0"
  }
}

Dokumentasi Formik dan yup

Pelajari Selengkapnya di https://formik.org/docs/overview

2. Instalasi ReactQuery

terminal

npm install @tanstack/react-query @tanstack/react-query-devtools

package.json

{
  "name": "frontend-nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3010",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@tanstack/react-query": "^4.33.0",
    "@tanstack/reac
    "@heroicons/react": "^2.0.18",
    "@react-spring/web": "^9.7.3",t-query-devtools": "^4.33.0",
    "@types/node": "20.4.5",
    "@types/react": "18.2.17",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.14",
    "axios": "^1.5.0",
    "clsx": "^2.0.0",
    "eslint": "8.46.0",
    "eslint-config-next": "13.4.12",
    "formik": "^2.4.3",
    "next": "13.4.12",
    "postcss": "8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-spinners": "^0.13.8",
    "sweetalert2": "^11.7.27",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6",
    "yup": "^1.2.0"
  }
}

componenet/ReactQuery.tsx

"use client";
import React, { ReactNode } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

interface ReactQueryProps {
  children: ReactNode;
}

const ReactQuery: React.FC<ReactQueryProps> = ({ children }) => {
  const queryClient = new QueryClient();
  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
};

export default ReactQuery;

app/layout.tsx

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import ReactQuery from './component/ReactQuery'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={'px-5'}>
        <ReactQuery>
          {children}
        </ReactQuery>
      </body>
    </html>
  )
}

Dokumentasi Formik dan yup

Pelajari Selengkapnya di https://tanstack.com/query/v4/docs/react/overview