API routing_form_hello

src/pages/about.tsx

@@ -3,7 +3,17 @@ const AboutPage = () => {
   return (
     <div className={styles.container}>
       <h2>About page</h2>
-      <br />{" "}
+      <br />
+      <h3>API routing TEST</h3>
+      <form action="/api/form" method="post">
+        <label htmlFor="first">First name:</label>
+        <input type="text" id="first" name="first" />
+        <br />
+        <label htmlFor="last">Last name:</label>
+        <input type="text" id="last" name="last" />
+        <br />
+        <button type="submit">Submit</button>
+      </form>
     </div>
   );
 };

src/pages/api/form.tsx

@@ -0,0 +1,19 @@
+export default function handler(req, res) {
+  // Get data submitted in request's body.
+  const body = req.body;
+
+  // Optional logging to see the responses
+  // in the command line where next.js app is running.
+  console.log("body: ", body);
+
+  // Guard clause checks for first and last name,
+  // and returns early if they are not found
+  if (!body.first || !body.last) {
+    // Sends a HTTP bad request error code
+    return res.status(400).json({ data: "First or last name not found" });
+  }
+
+  // Found the name.
+  // Sends a HTTP success code
+  res.status(200).json({ data: `${body.first} ${body.last}` });
+}

src/pages/api/hello.tsx

@@ -0,0 +1,4 @@
+const handler = (req, res) => {
+  return res.status(200).json({ name: "へろー" });
+};
+export default handler;

src/pages/index.tsx

@@ -3,11 +3,11 @@ const RenderPage = () => (
   <div className={styles.container}>
     <div>
       <h2>Home page</h2>
-      <p>branch 05_csb-e9r66s</p>
+      <p>branch 07_csb-rseo19</p>
       <code>
-        making like easy-notion-blog
+        ... making like easy-notion-blog
         <br />
-        No component　
+        API routing　
       </code>
     </div>
   </div>