ในขณะที่ 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>
);
}