Next.js: Next.js 9 API κ²½λ‘œλŠ” μš”μ²­ μš”μ²­μ—μ„œλŠ” μž‘λ™ν•˜μ§€λ§Œ κ²Œμ‹œ μš”μ²­μ—μ„œλŠ” μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

에 λ§Œλ“  2019λ…„ 07μ›” 14일  Β·  23μ½”λ©˜νŠΈ  Β·  좜처: vercel/next.js

Next.js에 λŒ€ν•œ 질문

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λ₯Ό 쀄 κ²ƒμž…λ‹ˆλ‹€. μ—¬κΈ°μ„œ λ¬Έμ œκ°€ 무엇인지 κΆκΈˆν•©λ‹ˆλ‹€.

κ°μ‚¬ν•©λ‹ˆλ‹€

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

λ‚˜λŠ” λ˜ν•œ λ‹€μŒκ³Ό ν•¨κ»˜ 우리 ν”„λ‘œμ νŠΈμ—μ„œ 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)
})

λͺ¨λ“  23 λŒ“κΈ€

@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 경둜 λ‚΄μ—μ„œ ꡬ문 λΆ„μ„λœ 본문을 κ°€μ Έμ˜€λ©΄ λ§Žμ€ 문제λ₯Ό ν•΄κ²°ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰