get λμ postλ₯Ό μ¬μ©νλλ‘ μΌλΆ APIλ₯Ό μμ νλ €κ³ ν©λλ€.
μΌλ° κ°μ Έ μ€κΈ°μ ν¨κ» μ΄μ κ°μ μμ² μ½λκ° μμ΅λλ€.
const response = await fetch(`${process.env.SERVER}/api/lyric?id=${song.song_id}`);
./page/api λ΄λΆμ νμΌμ λλ¬νκ³ ν΄κ²°λμ§λ§ λ€μ μ½λλ‘ λ³κ²½νλ©΄
const response = await fetch(`${process.env.SERVER}/api/lyric`, {
method: 'POST',
body: JSON.stringify({id: song.song_id})
});
κ·Έκ²μ λμκ² 404 not foundλ₯Ό μ€ κ²μ λλ€. μ¬κΈ°μ λ¬Έμ κ° λ¬΄μμΈμ§ κΆκΈν©λλ€.
κ°μ¬ν©λλ€
@zluo01λ , λ¬Έμ μμ 무μμ΄ μλͺ»λμλμ§ μΆμΈ‘νκΈ° μ΄λ ΅μ΅λλ€. POST
λν ν΅ν© ν
μ€νΈ λ₯Ό νμΈν μ μμ΅λλ€.
λΉμ μ μ΄κ²μ μμλΌ μ μμμ΅λκΉ? API κ²½λ‘μ λν λ¬Έμλ κ±°μ μμΌλ©° GET μμ²μ λν΄ μ λλ‘ μλνλ κ²½λ‘λ‘ μ μ‘λ POST μμ²μ λν 404 μλ΅λ μμ νκ³ μμ΅λλ€.
λΉμ μ μ΄κ²μ μμλΌ μ μμμ΅λκΉ? API κ²½λ‘μ λν λ¬Έμλ κ±°μ μμΌλ©° GET μμ²μ λν΄ μ λλ‘ μλνλ κ²½λ‘λ‘ μ μ‘λ POST μμ²μ λν 404 μλ΅λ μμ νκ³ μμ΅λλ€.
μ£μ‘ν©λλ€. λμ Getμ μ¬μ©νκ³ ν€λ μμ νλͺ©μ λ£κ³ μ 체 μ¬μμ°μ μμ±ν μκ°μ΄ μμ΅λλ€.
POST μ²λ¦¬μ λν μΌλΆ λ¬Έμλ μ μ©ν κ²μ λλ€.
@stoplion 무μμ λ¬Έμννκ³ μΆμ΅λκΉ? λ¬Έμ ν νλ¦Ώμ λ°λΌ λ¬Έμ λ₯Ό λ§λ€ μ μμ΅λκΉ?
νμ νλ
λλ λν λ€μκ³Ό ν¨κ» μ°λ¦¬ νλ‘μ νΈμμ 404λ₯Ό λ΄ λλ€.
const res = await fetch('/api/bookings', {
method: 'POST',
body: JSON.stringify({ hungry: true }),
headers: {
'Content-Type': 'application/json',
},
})
const data = await res.json()
api/bookings
νμΌμ λ΄μ©μ μ€μνμ§ μμ΅λλ€. κ·Έκ²μ κ²°μ½ λͺ
μ€νμ§ μμ κ²μ
λλ€. localhostμμ νλ‘μ νΈλ₯Ό μ€ννκΈ° μν΄ now dev
λ₯Ό μ¬μ©νκ³ μμ΅λλ€.
μ
λ°μ΄νΈ
now dev
μμλ μ λλ‘ μλνμ§λ§ κ²μλ¬Ό μμ²μ μ²λ¦¬νμ§ μμκΈ° λλ¬Έμ server.js
νμΌμμλ μλνμ§ μλλ€λ κ²μ μμμ΅λλ€. μμ² ν μ²λ¦¬κΈ°λ₯Ό μΆκ°νκΈ°λ§ νλ©΄ λͺ¨λ κ²μ΄ μ μλν©λλ€.
server.post('*', (req, res) => {
return handle(req, res)
})
@TommySorensen μ΄κ²μ μ΅μ μΉ΄λ리μμμ μμ λμ΄μΌ ν©λλ€
μ΄κ²μ΄ λ΅λ³λ μ μ΄ μμ΅λκΉ? λ€μ v9 API κ²½λ‘μ POSTνλ λ°©λ²μ΄ μμ΅λκΉ?
μ΄κ²μ΄ λ΅λ³λ μ μ΄ μμ΅λκΉ? λ€μ v9 API κ²½λ‘μ POSTνλ λ°©λ²μ΄ μμ΅λκΉ?
μ. API κ²½λ‘μ κ²μνλ κ²λ§μΌλ‘λ μ μλν©λλ€. μ΄ μ λ₯Ό μ¬μ©νμ¬ get to postλ₯Ό λ³κ²½νμμμ€. κ·Έκ² λ΄κ° ν μΌμ΄λ€. 맀λ ₯μ²λΌ μΌνμ΅λλ€ π
@huv1k 릴리μ€μ λν μμ΄λμ΄κ° μμ΅λκΉ?
@lifeiscontent 무μμ 릴리μ€?
@huv1k on
@lifeiscontent μμ ν λ²κ·Έκ° μμ΅λλ€. μ§μ ν μ€νΈν΄λ³΄μμ΅λλ€. NextJS μμ λ₯Ό μ¬μ©νλ©΄ POSTκ° μ λλ‘ μλν©λλ€. κ·Έκ²μ λΉμ μ μμ© νλ‘κ·Έλ¨μμλ κ²μ λλ€. μ‘°μ¬μ λμμ΄ λ μ μλλ‘ μ 체 μ½λμ μλ₯Ό μ 곡νμμμ€ π
μ¬μ΄ μ¬μ΄
_λ§μΆ€ μλ²_μμ
~νλ€
server.use((req, res) => app.getRequestHandler()(req, res))
μ¬ν:
npx create-next-app --example with-firebase-authentication with-firebase-authentication-app
api/test.js νμΌ μΆκ°
export default (req, res) => {
console.log('api test', req.method)
res.json('ok')
}
server.jsμ μμ² μ²λ¦¬κΈ°λ₯Ό μΆκ°ν©λλ€.
server.use((req, res) => app.getRequestHandler()(req, res))
yarn dev
(λλ node server.js
) μ€ν
POSTλ₯Ό http://localhost :3000/api/testλ‘ λ³΄λ λλ€
μμ: μ½μ λ‘κ·Έ api test POST
μ€μ : λ‘κ·Έ μμ, μμ²μ΄ μκ° μ΄κ³Όλ λκΉμ§ 보λ₯ μνλ‘ μ μ§λ¨
μλ₯Ό μ λ°μ΄νΈν΄μΌ ν©λλ€.
server.get('*', (req, res) => {
return handle(req, res)
})
λ νμκ°μλ€:
server.all('*', (req, res) => {
return handle(req, res)
})
μ€μ λ°κ²¬: isomorphic-unfetch
μ
κ·Έλ μ΄λ => μ
κ·Έλ μ΄λνμ§ λ§μΈμ π€
그건 κ·Έλ κ³ , Firebase μ’ μμ±μ κ½€ μ€λλμμ΅λλ€.
firebase ^5.6.0 β ^7.2.1
firebase-admin ^5.8.2 β ^8.6.1
μ¬μ©μ μ μ μ΅μ€νλ μ€ μλ²μ μμ§ μ΄ λ¬Έμ κ° μλ μ¬λμ΄ μλ κ²½μ° NextJs API κ²½λ‘κ° κΈ°λ³Έμ μΌλ‘ νμ±ννκΈ° λλ¬Έμ μ¬λ¬ λ°λ νμλ₯Ό μ¬μ©νλ λμ λ°μν μ μμ΅λλ€. μ΅μ€νλ μ€ λ°λ νμλ§ μ¬μ©νκ±°λ NextJs λ°λ νμλ§ μ¬μ©νμΈμ. NextJs λ°λ νμλ₯Ό λΉνμ±ννλ λ°©λ²: https://nextjs.org/docs#api -middlewares
@epranka @thgh , μ΄κ±Έ μμ λ΄λ λ° λͺ μκ°μ΄ κ±Έλ Έλ€.
Firebase Cloud Functions μλ²λ₯Ό μ¬μ© μ€μ΄λ©° API κ²½λ‘μ λν΄ POST μμ²μ ν μ μμ΅λλ€. POST μμ²μ μ€λ¨λμ§λ§ GET μμ²μ μ λλ‘ μλν©λλ€. κ·Έλ¦¬κ³ λ‘컬 NextJS κ°λ° μλ²λ₯Ό μ¬μ©νλ κ²½μ° POST μμ²λ μ λλ‘ μλν©λλ€.
Firebase Cloud Functionsλ₯Ό μ¬μ©ν λ λ³Έλ¬Έ νμλ₯Ό λΉνμ±ννλ©΄ λ¬Έμ κ° ν΄κ²°λμμ΅λλ€.
λΆλͺ ν Firebase Cloud Functionsμλ μ체 λ³Έλ¬Έ νμκ° μ 곡λλ©° NextJSμ μΆ©λν©λλ€. λ°λΌμ Firebase Cloud Functionsμ© ββλ°λ νμλ₯Ό λΉνμ±ννκ³ NextJS κ°λ° μλ²λ₯Ό μ¬μ©νμ¬ λ‘컬 κ°λ°μ μν΄ νμ±νν΄μΌ ν©λλ€.
λ°λΌμ κΈ°λ³Έμ μΌλ‘ pages/api/[yourEndPoint].js
μ΄κ²μ λλ‘νμμμ€.
export const config = {
api: {
bodyParser: process.env.NODE_ENV !== 'production'
}
};
@TommySorensen λ΅λ³μ΄ λλ₯Ό μν΄ ν΄κ²°νμ΅λλ€.
server.get("*", (req, res) => handle(req, res));
server.post("*", (req, res) => handle(req, res));
κ°μ¬ν©λλ€!
@epranka @thgh , μ΄κ±Έ μμ λ΄λ λ° λͺ μκ°μ΄ κ±Έλ Έλ€.
Firebase Cloud Functions μλ²λ₯Ό μ¬μ© μ€μ΄λ©° API κ²½λ‘μ λν΄ POST μμ²μ ν μ μμ΅λλ€. POST μμ²μ μ€λ¨λμ§λ§ GET μμ²μ μ λλ‘ μλν©λλ€. κ·Έλ¦¬κ³ λ‘컬 NextJS κ°λ° μλ²λ₯Ό μ¬μ©νλ κ²½μ° POST μμ²λ μ λλ‘ μλν©λλ€.
Firebase Cloud Functionsλ₯Ό μ¬μ©ν λ λ³Έλ¬Έ νμλ₯Ό λΉνμ±ννλ©΄ λ¬Έμ κ° ν΄κ²°λμμ΅λλ€.
λΆλͺ ν Firebase Cloud Functionsμλ μ체 λ³Έλ¬Έ νμκ° μ 곡λλ©° NextJSμ μΆ©λν©λλ€. λ°λΌμ Firebase Cloud Functionsμ© ββλ°λ νμλ₯Ό λΉνμ±ννκ³ NextJS κ°λ° μλ²λ₯Ό μ¬μ©νμ¬ λ‘컬 κ°λ°μ μν΄ νμ±νν΄μΌ ν©λλ€.
λ°λΌμ κΈ°λ³Έμ μΌλ‘
pages/api/[yourEndPoint].js
μ΄κ²μ λλ‘νμμμ€.export const config = { api: { bodyParser: process.env.NODE_ENV !== 'production' } };
κ°μ¬ ν΄μ! λκ°μ λ¬Έμ μ μ§λ©΄νμ΅λλ€. μμ μΌλ‘ ν΄κ²°λμμ΅λλ€. Firebase κΈ°λ₯μ΄ μλ λ³Έλ¬Έ ꡬ문 λΆμμ ν΄μ νλ ꡬμ±μ μ 곡νμ§ μλλ€λ κ²μ λλΌμ΄ μΌμ λλ€.
κ·Έλμ μ°λ¦¬λ μ¬μ©μ μ μ μλ²λ₯Ό μ¬μ©ν΄μΌνμ§λ§, api κ²½λ‘ λ΄μμ ꡬ문 λΆμλ λ³Έλ¬Έμ κ°μ Έμ€λ©΄ λ§μ λ¬Έμ λ₯Ό ν΄κ²°ν μ μμ΅λλ€.
κ°μ₯ μ μ©ν λκΈ
λλ λν λ€μκ³Ό ν¨κ» μ°λ¦¬ νλ‘μ νΈμμ 404λ₯Ό λ΄ λλ€.
api/bookings
νμΌμ λ΄μ©μ μ€μνμ§ μμ΅λλ€. κ·Έκ²μ κ²°μ½ λͺ μ€νμ§ μμ κ²μ λλ€. localhostμμ νλ‘μ νΈλ₯Ό μ€ννκΈ° μν΄now dev
λ₯Ό μ¬μ©νκ³ μμ΅λλ€.μ λ°μ΄νΈ
now dev
μμλ μ λλ‘ μλνμ§λ§ κ²μλ¬Ό μμ²μ μ²λ¦¬νμ§ μμκΈ° λλ¬Έμserver.js
νμΌμμλ μλνμ§ μλλ€λ κ²μ μμμ΅λλ€. μμ² ν μ²λ¦¬κΈ°λ₯Ό μΆκ°νκΈ°λ§ νλ©΄ λͺ¨λ κ²μ΄ μ μλν©λλ€.