Next: Feedback Backend API Project

Author: prathamesh-mutkure

Nextjs/nextjs-backend-apis/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

Nextjs/nextjs-backend-apis/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Nextjs/nextjs-backend-apis/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

Nextjs/nextjs-backend-apis/data/feedback.json

@@ -0,0 +1 @@
+[{"id":"2022-09-22T00:38:24.569Z","email":"[email protected]","feedback":"sas"},{"id":"2022-09-22T00:38:46.839Z","email":"[email protected]","feedback":"Hi on Chai?"},{"id":"2022-09-22T00:45:56.291Z","email":"[email protected]","feedback":"Hi on Coffee?"}]

Nextjs/nextjs-backend-apis/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+}
+
+module.exports = nextConfig

Nextjs/nextjs-backend-apis/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "nextjs-backend-apis",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "12.3.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "eslint": "8.23.1",
+    "eslint-config-next": "12.3.1"
+  }
+}

Nextjs/nextjs-backend-apis/pages/_app.js

@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

Nextjs/nextjs-backend-apis/pages/api/feedback/[feedbackId].js

@@ -0,0 +1,18 @@
+import { getData, getPath } from ".";
+
+const handler = (req, res) => {
+  const { feedbackId } = req.query;
+
+  const path = getPath();
+  const data = getData(path);
+
+  const feedback = data.find((fb) => fb.id === feedbackId);
+
+  if (!feedback) {
+    return res.status(404).json({ error: "Feedback not found!" });
+  }
+
+  res.status(200).json(feedback);
+};
+
+export default handler;

Nextjs/nextjs-backend-apis/pages/api/feedback/index.js

@@ -0,0 +1,41 @@
+import fs from "fs";
+import path from "path";
+
+export const getPath = () => {
+  return path.join(process.cwd(), "data", "feedback.json");
+};
+
+export const getData = (path) => {
+  const fileData = fs.readFileSync(path);
+  const data = JSON.parse(fileData);
+
+  return data;
+};
+
+export default function handler(req, res) {
+  const { method } = req;
+
+  if (method == "GET") {
+    const path = getPath();
+    const feedbackData = getData(path);
+
+    return res.status(200).json({ feedback: feedbackData });
+  } else if (method == "POST") {
+    const { email, feedback } = req.body;
+    const path = getPath();
+    const data = getData(path);
+
+    const newFeedback = {
+      id: new Date().toISOString(),
+      email,
+      feedback,
+    };
+
+    data.push(newFeedback);
+    fs.writeFileSync(path, JSON.stringify(data));
+
+    return res.status(200).json({ message: "Success", feedback: data });
+  } else {
+    res.status(200).json({ error: "Invalid Method" });
+  }
+}

Nextjs/nextjs-backend-apis/pages/feedback.js

@@ -0,0 +1,58 @@
+import { Fragment, useState } from "react";
+import { getPath, getData } from "./api/feedback/index";
+
+// DATA FROM APIs:
+// While using data from API server in getStaticProps or getServerSideProps
+// It is advisable to directly call the code running on the server
+// Instead of calling the data through fetch/API
+// This increases performance and speed
+
+// BIND()
+// The bind() methods can be used to assign "this" value to the function
+// And also assign it arguments on run-time
+
+const FeedbackListPage = (props) => {
+  const [feedbackDetail, setFeedbackDetails] = useState();
+
+  const showDetails = (id) => {
+    fetch(`/api/feedback/${id}`)
+      .then((response) => response.json())
+      .then((data) => {
+        setFeedbackDetails(data);
+      })
+      .catch(console.log);
+  };
+
+  return (
+    <Fragment>
+      {feedbackDetail && <p>{feedbackDetail.email}</p>}
+      <ul>
+        {props.feedbackData.map((feedback) => {
+          return (
+            <Fragment>
+              <li key={feedback.id}>{feedback.feedback}</li>
+              <button onClick={showDetails.bind(null, feedback.id)}>
+                Details
+              </button>
+            </Fragment>
+          );
+        })}
+      </ul>
+    </Fragment>
+  );
+};
+
+const getStaticProps = (_) => {
+  const path = getPath();
+  const data = getData(path);
+
+  return {
+    props: {
+      feedbackData: data,
+    },
+    revalidate: 60,
+  };
+};
+
+export default FeedbackListPage;
+export { getStaticProps };