{"componentChunkName":"component---src-templates-post-js","path":"/개발/2020/10/10/start-next-js-5/","result":{"data":{"markdownRemark":{"fields":{"slug":"/개발/2020/10/10/start-next-js-5/","date":"2020-10-10"},"frontmatter":{"title":"Next.js 시작해보자 5/5 - API Routes","tags":["nextjs","react framework","API Routes"],"author":"jslee"},"id":"d2db2307-8e8e-51ec-b22d-1552b0ae1119","html":"<p><a href=\"https://nextjs.org/learn/basics/api-routes\">https://nextjs.org/learn/basics/api-routes</a></p>\n<p>Node.js serverless function으로 API endpoint를 쉽게 만들수 있습니다. 블로그 앱에는 필요하지 않지만 간단하게 사용하는 방법을 소개</p>\n<h1>포스트에서 다룰 내용</h1>\n<ul>\n<li>어떻게 API Route을 만드는지</li>\n<li>API Routes에 대한 유용한 정보</li>\n</ul>\n<h1>Creating API Routes</h1>\n<p><a href=\"https://nextjs.org/learn/basics/api-routes/creating-api-routes\">https://nextjs.org/learn/basics/api-routes/creating-api-routes</a></p>\n<p>API Routes을 이용해 Next.js app안에 API endpoint를 만들수 있다. <code class=\"language-text\">pages/api</code>안에 함수를 만들면 된다.</p>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token comment\">// req = request data, res = response data</span>\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">req<span class=\"token punctuation\">,</span> res</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>serverless Functions으로 배포가 가능하다. (also known as lambdas)</p>\n<h2>Creating a simple API endpoint</h2>\n<p><code class=\"language-text\">pages/api</code>에 <code class=\"language-text\">hello.js</code>를 만들어보자</p>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">req<span class=\"token punctuation\">,</span> res</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  res<span class=\"token punctuation\">.</span><span class=\"token function\">status</span><span class=\"token punctuation\">(</span><span class=\"token number\">200</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> text<span class=\"token operator\">:</span> <span class=\"token string\">\"Hello\"</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><code class=\"language-text\">/api/hello</code>로 호출하면 응답이 온다.</p>\n<ul>\n<li>\n<p>req: <a href=\"https://nodejs.org/api/http.html#http_class_http_incomingmessage\">https://nodejs.org/api/http.html#http_class_http_incomingmessage</a></p>\n<ul>\n<li>pre-built middlewares : <a href=\"https://nextjs.org/docs/api-routes/api-middlewares\">https://nextjs.org/docs/api-routes/api-middlewares</a></li>\n</ul>\n</li>\n<li>\n<p>res: <a href=\"https://nodejs.org/api/http.html#http_class_http_serverresponse\">https://nodejs.org/api/http.html#http_class_http_serverresponse</a></p>\n<ul>\n<li>helper functions: <a href=\"https://nextjs.org/docs/api-routes/response-helpers\">https://nextjs.org/docs/api-routes/response-helpers</a></li>\n</ul>\n</li>\n</ul>\n<h1>API Routes Details</h1>\n<p><a href=\"https://nextjs.org/learn/basics/api-routes/api-routes-details\">https://nextjs.org/learn/basics/api-routes/api-routes-details</a></p>\n<h2>Do Not Fetch an API Route from <code class=\"language-text\">getStaticProps</code> or <code class=\"language-text\">getStaticPaths</code></h2>\n<p><code class=\"language-text\">getStaticProps</code>또는 <code class=\"language-text\">getStaticPaths</code>에서는 API Route를 가져오지(fetch) 않아야 한다. 대신 <code class=\"language-text\">getStaticProps</code> 또는 <code class=\"language-text\">getStaticPaths</code>에서 직접 server-side 코드를 작성해야 한다.</p>\n<p><code class=\"language-text\">getStaticProps</code>와 <code class=\"language-text\">getStaticPaths</code>는 오직 server-side에서 동작한다. client-side에서는 실행되지 않는다. 브라우저 용 JS 번들에도 포함되지 않는다. 즉, 직접 데이터베이스 쿼리와 같은 코드를 브라우저로 보내지 않고도 작성할 수 있다.</p>\n<h2>A Good Use Case: Handling Form Input</h2>\n<p>form input을 처리하기 위한 API Routes의 좋은 사용예다. 예를 들어 페이지에서 form을 만들고 API Route에 POST 요청을 보내도록 할 수 있다. 그런 다음 코드를 작성하여 데이터베이스에 직접 저장할 수 있다. API Route 코드는 클라이언트 번들의 일부가 아니므로 server-side code를 안전하게 작성할 수 있다.</p>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">req<span class=\"token punctuation\">,</span> res</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> email <span class=\"token operator\">=</span> req<span class=\"token punctuation\">.</span>body<span class=\"token punctuation\">.</span>email\n  <span class=\"token comment\">// Then save email to your database, etc...</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h2>Preview Mode</h2>\n<p><code class=\"language-text\">Static Generation</code>은 headless CMS에서 데이터를 가져올 때 유용하다. 그러나 headless CMS에서 초안을 작성하고 페이지에서 즉시 초안을 미리보고 싶은 경우에는 적합하지 않다. Next.js가 build time이 아닌 request time에 이러한 페이지를 렌더링하고 게시된 콘텐츠 대신 초안 콘텐츠를 가져오기를 원한다. 이 특정 경우에만 Next.js가 정적 생성을 우회하기를 원한다.</p>\n<p>Next.js에는 위의 문제를 해결하기 위한 <code class=\"language-text\">Preview Mode</code>라는 기능이 있으며 API Route를 활용한다.</p>\n<p><a href=\"https://nextjs.org/docs/advanced-features/preview-mode\">Preview Mode document</a></p>","excerpt":"https://nextjs.org/learn/basics/api-routes Node.js serverless function으로 API endpoint…"}},"pageContext":{"pagePath":"/개발/2020/10/10/start-next-js-5/","next":{"fields":{"slug":"/개발/2020/08/26/deep-neural-netowkrs-for-recommendation/"},"frontmatter":{"title":"Deep Neural Network Models for Recommendation","tags":["DeepNeuralNetwork","recommendations","model"]}},"prev":{"fields":{"slug":"/개발/2020/10/10/start-next-js-4/"},"frontmatter":{"title":"Next.js 시작해보자 4/5 - Dynamic Routes","tags":["nextjs","react framework","dynamic routes","path","rendering","markdown","css"]}}}},"staticQueryHashes":["1981752614","3361508366"]}