aws-s3-with-react-and-node

Milan Poudel

Aws S3 with React and Node

 Modifying "handleSubmit" and adding axios request:

Hooks are the powerful functions in React that helps us to leverage the lifecycle features and share states. Since, the functional component has been the recommended way of writing in React, we are using Hooks as much as possible. Certainly, with every power that it gives, we are definitely going to be ambush it at some point. Let's see the most common pitfalls and the mistakes we do as a developer while using React Hooks: <h2>Creating multiple states and using in UseEffect:</h2> Suppose there are multiple states that we are defining using useState. Let's say a first number and a second number. <pre class="ql-syntax" spellcheck="false">const [firstNumber, setFirstNumber] = useState(0);
const [secondNumber, setSecondNumber] = useState(0);
</pre> Let us suppose that a second number is dependent on a first number. Let's say we manipulate the first number. <pre class="ql-syntax" spellcheck="false"> const changeFirstNumber = () =&gt; {
 setFirstNumber(10)
 }
 
// one way of changing second number now
﻿ useEffect(()﻿ =&gt; {if(firstNumber) {
 setSecondNumber(firstNumber * 10)
 } 
 }, [firstNumber])
</pre> <blockquote>Do you think we even need "useEffect" here to manipulate the second number which let's say depends on first number? 🤔 Do we even need a separate state here for "secondNumber"?</blockquote> The answer is no. We don't need a separate state for second Number in case it is only depended on first Number. Since whenever, state changes, the functional component starts to execute itself from the beginning, so we don't need another state to change the second number. <pre class="ql-syntax" spellcheck="false">const [firstNumber, setFirstNumber] = useState(0);
// secondNumber will be reevaluated.
const secondNumber = firstNumber * 10;
</pre>

react-hooks-common-pitfalls-and-blunders

React Hooks: Common Pitfalls and Blunders

Setting up Amazon Email Service with Nodemailer

setting-up-amazon-email-service-with-nodemailer

Setting up Amazon Email Service with Nodemailer

Setting up a custom domain with a backend service deployed or hosted in services like EC2 provided by AWS has been a common practice. In this article, we will see how can host our NodeJS api in EC2 and configure our DNS routing with the help of Route53 to namecheap domain. In this part, we will focus on creating route53 hosted zone and create a custom DNS in namecheap with values provided by Route53. I assume we have already deployed our NodeJs service in AWS EC2. If not, then please our previous article. Let's get started. Let's proceed to AWS dashboard after login. Then, search for "Route53" under services.

route53-hosted-zone-with-namecheap

Route53 : Hosted Zone with Namecheap

<h2 id="heading-0"> </h2> Golang has become one of the most popular languages which is being widely used in the backend domain. Thanks to its simplicity and the features of concurrency, we have been able to create a performant monolith and microservices using Golang. <blockquote>Note: Although the standard library of Golang is enough for us to create an HTTP API services, we will be using Gin as a framework in this post. Gin, which is really popular and widely used framework, will help us to handle routing, routes grouping, middleware, and other things.</blockquote> <h2 id="setting-up-a-new-project">Setting up a new project:</h2> Let's get started, we will create a new folder named "<a href="https://github.com/milanpoudelwebdeveloper/goginrestapis/tree/main" rel="noopener noreferrer" target="_blank" style="color: var(--fgColor-accent,var(--color-accent-fg,#0969da));">goginrestapis</a>" or anything as you like. Inside the folder, we will create a file named "main.go". Let's write a basic main function in the main.go file.<h2 id="heading-2"> </h2><pre class="ql-syntax" spellcheck="false">//main.go 
﻿
package main
import "fmt"
func main() {
&nbsp; &nbsp; fmt.Println("Hello world")
}
</pre> <h2 id="command-to-run-maingo-file">Command to run main.go file</h2> Let's run this file with a run command to check if everything is working. <pre class="ql-syntax" spellcheck="false">﻿go run main.go
// Output:
﻿﻿Hello world
</pre> <h2 id="initializing-go-modules">Initializing "Go Modules":</h2> To install the packages or libraries, we should initialize go modules so we can manage and organize the packages or libraries that we have installed in our Go Project. Let's initiliaze it: We can give it any name as we like: <pre class="ql-syntax" spellcheck="false">﻿go mod init goginrestapis
</pre><h2 id="heading-5"> </h2> With this, now we will able to install Go Gin in our project. This will install go gin package in our project. <pre class="ql-syntax" spellcheck="false"> go get -u github.com/gin-gonic/gin
</pre><h3 id="heading-6"> </h3><h3 id="simple-http-get-request-with-gin">Simple HTTP GET request with GIN:</h3> Let's use "gin" in our project now in our main file:<pre class="ql-syntax" spellcheck="false">package main
import (
	"fmt"
	"github.com/gin-gonic/gin"
)

func main() {
 //initializing a gin router 
	r:= gin.Default()
 //just a simple ping request to check if gin is working and can send response
&nbsp; &nbsp; r.GET("/ping", func(c *gin.Context) {
&nbsp; &nbsp; &nbsp; &nbsp; c.JSON(http.StatusOK, gin.H{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "message": "pong",
&nbsp; &nbsp; &nbsp; &nbsp; })
&nbsp; &nbsp; })
}
</pre> Here, we did the following things: <ul><li>We initialized a router from gin with all it's default middleware and loggers</li></ul> <ul><li>Then we created a simple "/ping" route just to check if we are getting back response and gin is working. Here , the controller excepts a function that has hat takes a <code>*gin.Context</code> parameter.</li></ul> <h3 id="our-simple-todo-struct">Our simple Todo struct:</h3> Let's take this further. We will create a todo struct that we will be returning as a response. <pre class="ql-syntax" spellcheck="false">﻿type todo struct {
	ID&nbsp; &nbsp; &nbsp; &nbsp; string `json:"id"`
	Title&nbsp; &nbsp; &nbsp;string `json:"title"`
	Completed bool&nbsp; &nbsp;`json:"completed"`
}
</pre> Here the structure looks a simple struct with the properties. The tags we see (<code>json:"id"</code>, <code>json:"title"</code>, <code>json:"completed"</code>) represents JSON tags. They specify the JSON key names to be used when encoding or decoding JSON data. We will create just a simple get route for now to send back the todos as a response. <pre class="ql-syntax" spellcheck="false">// created slices of todo
var todos = []todo{
	{ID: "1", Title: "Learn Go", Completed: false},
	{ID: "2", Title: "Build a RESTful API in Go", Completed: false},
	{ID: "3", Title: "Build a React app", Completed: false},
}
</pre> Now, let's send this slice of todo wich id todos slice as a response. <pre class="ql-syntax" spellcheck="false">func getTodos(context *gin.Context) {
	context.IndentedJSON(http.StatusOK, todos)
}
</pre> Here <code>context.IndentedJSON(http.StatusOK, todos) </code> will convert or marshal the slice of todos into the JSON format <h3 id="adding-gettodos-a-simple-handler-with-a-get-request">Adding "getTodos", a simple handler with a "GET" request:</h3> Putting it all together in our main file: <pre class="ql-syntax" spellcheck="false">﻿package main
import (
	"fmt"
	"net/http"
	"github.com/gin-gonic/gin"
)

type todo struct {
	ID&nbsp; &nbsp; &nbsp; &nbsp; string `json:"id"`
	Title&nbsp; &nbsp; &nbsp;string `json:"title"`
	Completed bool&nbsp; &nbsp;`json:"completed"`
}

var todos = []todo{
	{ID: "1", Title: "Learn Go", Completed: false},
	{ID: "2", Title: "Build a RESTful API in Go", Completed: false},
	{ID: "3", Title: "Build a React app", Completed: false},
}

func getTodos(context *gin.Context) {
 // will convert above slice of todo into JSON format so our client can receive
	context.IndentedJSON(http.StatusOK, todos)
}

func main() {
	r:= gin.Default()
 r.GET("/ping", func(c *gin.Context) {
&nbsp; &nbsp; &nbsp; &nbsp; c.JSON(http.StatusOK, gin.H{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "message": "pong",
&nbsp; &nbsp; &nbsp; &nbsp; })
&nbsp; &nbsp; })
	r.GET("/todos", getTodos)
	r.Run("localhost:8080")
}
</pre> With this, when we send a "GET" request to the route "/todos", we will be getting back the array of todos as a data. <h3 id="adding-newtodo-controller-with-post-request">Adding "newTodo" Controller with POST request:</h3> Let's add another simple "POST" request here to add a new todo data. <pre class="ql-syntax" spellcheck="false">﻿func addTodo(context *gin.Context) {
	var newTodo todo
 // here BindJSON receives and parses the request body// and maps the parsed json values to the field of newTodo struct﻿
 ﻿if err := context.BindJSON(&amp;newTodo); err != nil {
		return
	}
 // adding or appending a new todo the lists we already have
	todos = append(todos, newTodo)
	fmt.Println("New todo added: ", newTodo)
	fmt.Println("All todos: ", todos)
 // sending back the todos slices after adding new todo as converted json data
	context.IndentedJSON(http.StatusCreated, todos)
}
</pre> <h3 id="what-does-contextbindjson-does">What does "context.BindJSON" does?</h3> Here, within addTodo controller, we parsed the request body which will be in json format using context.BindJSON and then map our json values to the corresponding fields of newTodo struct. After mapping , we will append this newTodo struct data to our todos data and will send back new todos as a response. Putting it all together in our main file, it will look like this. <pre class="ql-syntax" spellcheck="false">﻿package main
import (
	"fmt"
	"net/http"
	"github.com/gin-gonic/gin"
)

type todo struct {
	ID&nbsp; &nbsp; &nbsp; &nbsp; string `json:"id"`
	Title&nbsp; &nbsp; &nbsp;string `json:"title"`
	Completed bool&nbsp; &nbsp;`json:"completed"`
}


var todos = []todo{
	{ID: "1", Title: "Learn Go", Completed: false},
	{ID: "2", Title: "Build a RESTful API in Go", Completed: false},
	{ID: "3", Title: "Build a React app", Completed: false},
}


func getTodos(context *gin.Context) {
	context.IndentedJSON(http.StatusOK, todos)
}


func addTodo(context *gin.Context) {
	var newTodo todo
	if err := context.BindJSON(&amp;newTodo); err != nil {
		return
	}
	todos = append(todos, newTodo)
	fmt.Println("New todo added: ", newTodo)
	fmt.Println("All todos: ", todos)
	context.IndentedJSON(http.StatusCreated, todos)
}

func main() {
	router := gin.Default()
	router.GET("/todos", getTodos)
	router.POST("/todos", addTodo)
	router.Run("localhost:8080")
}
</pre>

creating-rest-api-in-go-with-gin

Creating Rest API in Go with Gin

Adding "getTodos", a simple handler with a "GET" request:

Adding "newTodo" Controller with POST request:

react-hook-form-and-yup-validations-made-perfect

React Hook Form and Yup: Validations made perfect

Setting up a maintainable ecosystem is one of the first and essential steps in starting out a React Project. With tools like Eslint, Prettier and Typescript, we will be prepared enough to battle the runtime and type safety errors that can occur as the project codebase grows. In this article, we will learn how to create a ReactJS project with Vite template and how to set up tools like <a href="https://eslint.org/" rel="noopener noreferrer" target="_blank" style="color: rgb(13, 13, 13);">Eslint</a>, <a href="https://prettier.io/" rel="noopener noreferrer" target="_blank" style="color: rgb(13, 13, 13);"> Prettier</a> and <a href="https://www.typescriptlang.org/" rel="noopener noreferrer" target="_blank" style="color: rgb(13, 13, 13);">Typescript</a>. <h2 id="setting-up-new-react-project">Setting Up New React Project:</h2> Firstly, we will create a new folder.. After that, we can navigate to that folder either in terminal or open that folder using VS code editor. The following vite commands below will create the project using the react latest version. Since this is a react setup, so we will be choosing React and "variant" as Typescript to proceed since we will be using Typescript. <pre class="ql-syntax" spellcheck="false">﻿/*If we have already created the folder for our project*/
 cd myprojectfolder
 npm create vite@latest ./ 
</pre> <blockquote>By default, the typescript config file named tsconfig.json will be generated which will look the following code below except new added values by us.</blockquote> <h2 id="our-typescript-config">Our Typescript Config:</h2> <pre class="ql-syntax" spellcheck="false">{
&nbsp; "compilerOptions": {
&nbsp; &nbsp; "target": "ES2020",
&nbsp; &nbsp; "useDefineForClassFields": true,
&nbsp; &nbsp; "lib": ["ES2020", "DOM", "DOM.Iterable"],
&nbsp; &nbsp; "module": "ESNext",
&nbsp; &nbsp; "skipLibCheck": true,
&nbsp; &nbsp; "moduleResolution": "bundler",
&nbsp; &nbsp; "allowImportingTsExtensions": true,
&nbsp; &nbsp; "resolveJsonModule": true,
&nbsp; &nbsp; "isolatedModules": true,
&nbsp; &nbsp; "noEmit": true,
 &nbsp; /* new added line*/
&nbsp; &nbsp; "jsx": "react-jsx",
&nbsp; &nbsp; "strict": true,
&nbsp; &nbsp; "noUnusedLocals": true,
&nbsp; &nbsp; "noUnusedParameters": true,
&nbsp; &nbsp; "noFallthroughCasesInSwitch": true,
&nbsp; &nbsp; "baseUrl": ".",
 &nbsp; /* new added lines*/
&nbsp; &nbsp; "paths": {
&nbsp; &nbsp; &nbsp; "@components/*": ["/src/components/*"],
&nbsp; &nbsp; &nbsp; "@pages/*": ["/src/pages/*"],
&nbsp; &nbsp; &nbsp; "@constants/*": ["/src/constants/*"],
&nbsp; &nbsp; &nbsp; "@services/*": ["/src/services/*"],
&nbsp; &nbsp; &nbsp; "@hooks/*": ["/src/hooks/*"],
 "@/*": ["src/*"],
&nbsp; &nbsp; }
&nbsp; },
&nbsp; "include": ["src"],
&nbsp; "references": [{ "path": "./tsconfig.node.json" }],
&nbsp; "exclude": ["node_modules"]
}
</pre> What we added: <ul><li>a new object value pair named "jsx" which will allow us to write "jsx" in our typescript (.tsx) files.</li></ul> <ul><li>the "paths" key and it's value for the relative import of our files. Instead of using absolute path like "./..../components" , we can use "@/components/mycomponent", which will also be suggested by Typescript.</li></ul> <h2 id="our-modified-eslint-config-file">Our modified Eslint Config File:</h2> Likewise, we will also have the file named recommended ".eslintrc.cjs" config by default which will look the following configuration below:We will modify this file slightly in order to fit our project needs. <pre class="ql-syntax" spellcheck="false">﻿module.exports = {
&nbsp; root: true,
&nbsp; env: { browser: true, es2020: true },
&nbsp; extends: [
&nbsp; &nbsp; 'eslint:recommended',
&nbsp; &nbsp; 'plugin:@typescript-eslint/recommended',
&nbsp; &nbsp; 'plugin:react-hooks/recommended',
&nbsp; "plugin:import/errors",
 // new field added
 ﻿"prettier"
&nbsp; ],
&nbsp; ignorePatterns: ['dist', '.eslintrc.cjs'],
&nbsp; parser: '@typescript-eslint/parser',
 /* new plugins add*/
&nbsp; plugins: ['react-refresh', "import", "unused-imports"],
&nbsp; rules: {
 /*new rule add*/"unused-imports/no-unused-imports": "error",
&nbsp; &nbsp; "no-unused-vars": [
&nbsp; &nbsp; &nbsp; "error",
&nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; "vars": "all",
&nbsp; &nbsp; &nbsp; &nbsp; "args": "after-used",
&nbsp; &nbsp; &nbsp; &nbsp; "ignoreRestSiblings": false,
&nbsp; &nbsp; &nbsp; &nbsp; "argsIgnorePattern": "^_",
&nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; ],
&nbsp; &nbsp; 'react-refresh/only-export-components': [
&nbsp; &nbsp; &nbsp; 'warn',
&nbsp; &nbsp; &nbsp; { allowConstantExport: true },
&nbsp; &nbsp; ],
&nbsp; },
}

//nw packages to add for above added new plugins to work
&nbsp;npm i eslint-plugin-import eslint-plugin-unused-imports﻿ eslint-config-prettier
</pre> What we added: <ul><li> new plugins named "import" and "unused imports" which will help us to identify the unused imports in our codebase and help to clean them up.</li></ul> <ul><li>We also want to add prettier to work in sync with our eslint config for consistent code format and styles, hence we added new field "prettier"</li></ul> <blockquote>By default, our project initialization may not add ".eslintignore" file in our codebase. Make sure you create one at the root of our project and add following paths so that eslint will ignore these during linting and checking</blockquote> <pre class="ql-syntax" spellcheck="false"> /* .eslintignore */
node_modules
.env
build
</pre><h3 id="heading-3"> </h3><h3 id="installing-and-using-prettier-with-config">Installing and using "Prettier" with Config:</h3> We will be using prettier as well for better code formatting. So, we will install the prettier package and add a file named ".prettierrc.json". We can define the following values as per the need of our project. <pre class="ql-syntax" spellcheck="false">{
 //checks whether trailing comma needs to be added with arrays and objects.
&nbsp; "trailingComma": "none",
 //number of spaces per intendation. Here we haved used 2.
&nbsp; "tabWidth": 2,
 //whether we want to add semi colons at the end of code.
&nbsp; "semi": false,
 //whether to use single quotes ' or double quotes " for string literals.
&nbsp; "singleQuote": true,
}
</pre> <blockquote>By default, our project initialization may not add .".prettierignore" file in our codebase. So make sure you create one and add following paths so that prettier will skip those files and paths (same as .eslintignore)</blockquote> <h3 id="final-script-in-our-package-json-file">Final script in our package json file:</h3> The final steps are setting up the scripts in package.json file to run the eslint and prettier config. We will be using the scripts below for linting and formatting process. Inside scripts folder, we will add following code.. <pre class="ql-syntax" spellcheck="false">&nbsp;"scripts": {
&nbsp; &nbsp;&nbsp;"dev": "vite",
&nbsp; &nbsp; "build": "tsc &amp;&amp; vite build",
 &nbsp;"preview": "vite preview"
&nbsp; &nbsp; "lint": "next lint",
 // will check for linting errors
&nbsp; &nbsp; "lint:check": "eslint src/**/*.ts",
 // will check for errors as well as fix the errors as much as it can
&nbsp; &nbsp; "lint:fix": "eslint src/**/*.ts --fix",
 // will check for out codebase formatting
&nbsp; &nbsp; "prettier:check": "prettier --check 'src/**/*.{ts,json}'",
 // will try to fix our code style and formatting problems
&nbsp; &nbsp; "prettier:fix": "prettier --write 'src/**/*.{ts,json}'",
&nbsp; }
</pre> <h3 id="command-to-run-our-script-config">Command to run our script config:</h3> With all these setups we are good to go. We will use the following commands as per our needs to check for the linting as well as format errors. <pre class="ql-syntax" spellcheck="false">npm run lint:check
npm run lint:fix
npm run prettier:check
npm run prettier:fix
</pre><h3 id="heading-7"> </h3><h3 id="in-conclusion">In conclusion:</h3> There is no any perfect language. Javascript suffers from lots of pitfalls but setting up some toolchain like Typescript, Eslint and Prettier will definitely help us to minimize the errors we will encounter during development. Hence it is recommended to use Typescript along with all the given tools.

starting-react-project-with-vite,-typescript,-eslint-and-prettier

Starting React Project with Vite, Typescript, Eslint and Prettier

Installing and using "Prettier" with Config:

There comes a time when we are developing a static application, we need at least a way a user can contact us, be it any informational website or a portfolio. Imagine you are creating a website and there is no any backend to it. Additionally, you don't want to pay for any service. Client side frameworks or libraries like ReactJS definitely can't help with file access and writing, but NextJS provides us an API which we will use to create a new file and write content with it. This method is definitely only meant for small applications and static websites. <h2 id="creating-a-new-nextjs-project">Creating a new NEXTJS Project</h2> Assuming that we are already familiar with NextJS and at least know the basics, we will proceed to create a new nextjs project. To create a new project, we use the following commands below either in terminal or in the supported editor. <pre class="ql-syntax" spellcheck="false">npx create-next-app@latest﻿
</pre> Hopefully, our new project is created. We will have pages folder inside our new project and definitely an "api" folder inside it. We can leverage this folder to allow us use the methods of file access and writing. Let's first create a new page named "contact.tsx" or any name as you like. And add some jsx and styling to it. <pre class="ql-syntax" spellcheck="false">//pages/contact.tsx
import React from 'react'
﻿
const Contact = () =&gt; {
&nbsp; const handleSubmit = (e: React.FormEvent&lt;HTMLFormElement&gt;) =&gt; {
&nbsp; &nbsp; e.preventDefault()
&nbsp; &nbsp; console.log('Form Submitted')
&nbsp; }
&nbsp; return (
&nbsp; &nbsp; &lt;div className="container"&gt;
&nbsp; &nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;form className="contact-form" onSubmit={handleSubmit}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Phone Directory&lt;/h1&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" placeholder="Name" required className="contact-form-field" /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="email" placeholder="Email" required className="contact-form-field" /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="phone" placeholder="Phone" required className="contact-form-field" /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="submit" className="contact-form-button"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Submit
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/form&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; )
}


export default Contact
</pre> <h2 id="styling-our-contact-form">Styling our Contact Form:</h2> Here's the styling of our contact form. <pre class="ql-syntax" spellcheck="false">// styles/contact.css

.container {
&nbsp; height: 100vh;
&nbsp; display: flex;
&nbsp; justify-content: center;
&nbsp; align-items: center;
&nbsp; background: blue;
}

.contact-form {
&nbsp; margin: 0 auto;
&nbsp; width: 50%;
&nbsp; padding: 30px;
&nbsp; background: #fff;
&nbsp; border-radius: 5px;
&nbsp; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
&nbsp; width: 470px;
&nbsp; text-align: center;
}

.contact-form h1 {
&nbsp; margin-bottom: 20px;
&nbsp; color: #333;
&nbsp; font-size: 24px;
&nbsp; font-weight: 700;
}

.contact-form-field {
&nbsp; margin-bottom: 20px;
&nbsp; border: 1px solid #ccc;
&nbsp; border-radius: 5px;
&nbsp; width: 100%;
&nbsp; padding: 10px;
}


.contact-form-button {
&nbsp; background: #333;
&nbsp; color: #fff;
&nbsp; border: none;
&nbsp; border-radius: 5px;
&nbsp; padding: 10px 20px;
&nbsp; cursor: pointer;
}
</pre> Our contact form will look like this after styling <img src="https://d3esk90d93y9n7.cloudfront.net/contactform.webp-1714284673998"> <h2 id="creating-an-async-function-for-writing-a-file">Creating an async function for writing a file</h2> With this all styling and UI setup, we are all ready to create a functionality. So, we will create a new function inside an "api" folder. It will help us create a new file and append contents to it using POST method. <pre class="ql-syntax" spellcheck="false">//pages/api/contact.ts
import { appendFile } from 'fs'
import { NextApiRequest, NextApiResponse } from 'next'
import path from 'path'
﻿

const writeAFile = async (req: NextApiRequest, res: NextApiResponse) =&gt; {
&nbsp; const { data } = req.body
&nbsp; try {
&nbsp; &nbsp; if (req.method === 'POST') {
&nbsp; &nbsp; &nbsp; const filePath = path.join(process.cwd(), 'public', 'contacts.txt')
&nbsp; &nbsp; &nbsp; // Change the file name as needed//line break with each post request
&nbsp; &nbsp; &nbsp; const fileContent = `${data}\n`
&nbsp; &nbsp; &nbsp; await appendFile(filePath, fileContent, (error) =&gt; {
&nbsp; &nbsp; &nbsp; &nbsp; if (error) throw new Error('Error writing to file')
&nbsp; &nbsp; &nbsp; })
&nbsp; &nbsp; &nbsp; res.status(200).json({ message: 'New content added successfully.' })
&nbsp; &nbsp; }
&nbsp; } catch (error) {
&nbsp; &nbsp; res.status(500).json({ error: 'Error creating a new contact' })
&nbsp; }
}
export default writeAFile
</pre> Few points to be noted: <ul><li>Here we are trying to join a path and create a file with it. Here, "process.cwd()" will give us the current path of the project and we will be creating a new file named "contacts.txt" inside our public directory.</li></ul> <ul><li>Here "appendfile" is an asynchronous function that we get from "fs" module which is related with file system functionality.</li></ul> <h3 id="integrating-writefile-api-function-">Integrating writeFile API function </h3> Let's replace our "handleSubmit" function from above which we attached on form onsubmit event. We also need to set values of our input field. So we will manage their values using setState. <pre class="ql-syntax" spellcheck="false">import { useState } from 'react'
﻿
const Contact = () =&gt; {
&nbsp; const [name, setName] = useState('')
&nbsp; const [email, setEmail] = useState('')
&nbsp; const [phone, setPhone] = useState('')

 //replaced with new submit handler to call our contact api we created

const handleSubmit = async (e: React.FormEvent&lt;HTMLFormElement&gt;) =&gt; {
&nbsp; &nbsp; e.preventDefault()
&nbsp; &nbsp; const formattedData = `Name: ${name}\nEmail: ${email}\nPhone: ${phone}\n\n`
&nbsp; &nbsp; try {
&nbsp; &nbsp; &nbsp; const res = await fetch('/api/contact', {
&nbsp; &nbsp; &nbsp; &nbsp; method: 'POST',
&nbsp; &nbsp; &nbsp; &nbsp; body: JSON.stringify({ data: formattedData }),
&nbsp; &nbsp; &nbsp; &nbsp; headers: {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'Content-Type': 'application/json'
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; })
&nbsp; &nbsp; &nbsp; if (res) {
&nbsp; &nbsp; &nbsp; &nbsp; alert('Contact saved successfully')
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; } catch (e) {
&nbsp; &nbsp; &nbsp; alert('Something went wrong while saving contact, please try again.')
&nbsp; &nbsp; }
&nbsp; }
&nbsp; return (
&nbsp; &nbsp; &lt;div className="container"&gt;
&nbsp; &nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;form className="contact-form" onSubmit={handleSubmit}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Phone Directory&lt;/h1&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" placeholder="Name" required className="contact-form-field" onChange={(e) =&gt; setName(e.target.value)} /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="email" placeholder="Email" required className="contact-form-field" onChange={(e) =&gt; setEmail(e.target.value)} /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="phone" placeholder="Phone" required className="contact-form-field" onChange={(e) =&gt; setPhone(e.target.value)} /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="submit" className="contact-form-button"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Submit
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/form&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; )
}

export default Contact
</pre> After this, when we will submit a form, we will see a folder created in our public folder named "contacts.txt" which will have all the contact information that we havesubmitted. <h3 id="conclusion">Conclusion:</h3> Writing to a file is a handy way to save some content saved in a project. With the use of NextJS that helps us write a backend or api service, we can leverage it's power to access file utilities. Hence, NextJS has a come a long way to establish itself as a full stack framework for small to mid level projects.

phone-directory-writing-to-a-file-using-nextjs

Phone Directory: Writing to a file using NextJS

Creating an async function for writing a file