Next.js Axios ตั้งค่า defaults config


ในขณะที่ create-react-app มี react-scripts ซึ่งช่วยให้การตั้งค่า Proxy ใน package.json เป็นไปอย่างง่ายดาย แต่ใน Next.js มันทำไม่ได้ ก็หาวิธีอยู่ตั้งนาน

การเซ็ตค่าต่างๆ ของ Axios ใน Next.js นั้นต้องทำแบบ Manual ไม่สามารถให้มันดึงอัตโนมัติได้ ดังนั้นจึงต้องทำการสร้างไฟล์ตัวกลางมาเพื่อกำหนด defaults config ต่างๆ ที่เราจะใช้ในการยิง Http Request ของเรา เมื่อรู้อย่างนี้แล้ววิธีการทำก็ง่ายมากๆ ตามนี้เลย

สร้างไฟล์ axios.config.js

จริงๆ จะสร้างอะไรไว้ตรงไหนก็ได้ ขอแค่เรียกถูกก็พอ แต่เคนเอาแบบนี้ง่ายๆ ดี สร้างไฟล์ axios.config.js ไว้ที่ root เลย โดยในไฟล์เคนต้องการกำหนดง่ายๆ โดยให้ baseURL กับ Content-Type เป็นไปตามที่เคนกำหนดโดยไม่ต้องตั้งค่าทุกครั้งก็จะได้โค้ดแบบนี้

// path: /axios.config.js
// set defaults axios config for Next.js

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:5000';
axios.defaults.headers.post['Content-Type'] = 'application/json';

export default axios;

เวลาใช้งานจริงในไฟล์ pages/login.js

อันนี้เป็นไฟล์สมมติว่าเราเอาไปใช้ในหน้า Login ละกัน โดยจะชื่อไฟล์ login.js อยู่ในโฟลเดอร์ pages

// path: /pages/login.js

import { useRef } from 'react';
import Head from 'next/head';

// Change import from 'axios' to 'axios.config.js'
import axios from '../axios.config';

export default function Login() {
  const usernameRef = useRef(null);
  const passwordRef = useRef(null);

  const onSubmit = async (e) => {
    e.preventDefault();

    const body = JSON.stringify({
      username: usernameRef.current.value,
      password: passwordRef.current.value,
    });

    const res = await axios.post('/api/auth', body);
    console.log(res.data);
  };

  return (
    <div className='container'>
      <Head>
        <title>Login Page</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <form onSubmit={onSubmit}>
        <input
          type='text'
          name='username'
          placeholder='username'
          ref={usernameRef}
        />
        <input
          type='password'
          name='password'
          placeholder='password'
          ref={passwordRef}
        />
        <button type='submit'>Submit</button>
      </form>
    </div>
  );
}

3 1 vote
Article Rating

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Navigate

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้

  • คุกกี้เพื่อการวิเคราะห์

    คุกกี้นี้เป็นการเก็บข้อมูลสาธารณะสำหรับการวิเคราะห์ และเก็บสถิติการใช้งานภายในเว็บไซต์นี้เท่านั้น ไม่ได้เก็บข้อมูลส่วนตัวที่ไม่เป็นสาธารณะใดๆ ของผู้ใช้งาน

บันทึกการตั้งค่า
0
Would love your thoughts, please comment.x
()
x