DEV Community: PREM KUMAR

next js 13.4 server Action step by step guide

PREM KUMAR — Mon, 17 Jul 2023 20:18:06 +0000

Install the latest Next.js

To install the latest version of Next.js, run the following command in your terminal:

npx create-next-app@latest server-action

It will ask some questions. After the prompts, create-next-app will create a folder with your project name and install the required dependencies.

After installing the latest Next.js, open it on VS code:

Alternatively, you can enter this on your command line to achieve the same:

cd server-action
code .

Enable experimental Server Action

Now, go to the file next.config.js and add the experimental server action flag:

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        serverActions: true,
    }
}

module.exports = nextConfig

Start the server now using npm run dev. If you already have the server running, please remember to restart it.

API for testing server Action

As a frontend developer, I can't create a completely working API with CRUD operations, so I'm using mockAPI for this example.

mockAPI setup

Go to https://mockapi.io.
Create a profile.
Click on "New Project."

Give a name for your project and open the current project. You will see a screen like this:

Here, provide an endpoint name and select or add the scheme that you want.
In our case, I created a cityList endpoint:

After that, we have a citylist endpoint with the base URL mentioned on the page, like this:

Hover over the citylist and choose the number of fake data you want to populate. MockAPI will automatically create fake data for your convenience.

Once it's done, you can check the given URL with your endpoint.

Let's create a form in `page.js`

We are using Tailwind CSS for the design, but it's your choice to choose the one that comforts you:

export default async function City() {
    const res = await fetch('https://64b588e1f3dbab5a95c77074.mockapi.io/citylist', {
        method: 'GET',
    })
    const citylist = await res.json()
    return <main className="bg-gray-950 min-h-screen">

        <form className="flex flex-col gap-5 mx-auto w-1/2 pt-10" >
            <input placeholder="City Name" name="cityName" type="text" className="p-2 outline-none text-black rounded-md" />
            <input placeholder="Building No" name="buildingNo" type="text" className="p-2 outline-none text-black rounded-md" />
            <input placeholder="Zipcode" name="zipcode" type="text" className="p-2 outline-none text-black rounded-md" />
            <input placeholder="State" name="state" type="text" className="p-2 outline-none text-black rounded-md" />
            <input placeholder="Country" name="country" type="text" className="p-2 outline-none text-black rounded-md" />
            <button className="h-10 w-full bg-blue-500 rounded-md">Add location</button>
        </form>
        <h1>List of Cities </h1>
        <div className="flex flex-wrap gap-5 px-10 mt-10">
            {citylist.map(city => (
                <div key={city.id} class="w-56 bg-gray-700 rounded-lg shadow-md p-4">
                    <h2 class="text-xl font-semibold mb-2">{city.cityName}</h2>
                    <p class="text-gray-100 mb-1">Building No: {city.buildingNo}</p>
                    <p class="text-gray-100 mb-1">Zipcode: {city.zipcode}</p>
                    <p class="text-gray-100 mb-1">State: {city.state}</p>
                    <p class="text-gray-100 mb-1">Country: {city.country}</p>
                </div>
            ))
            }
        </div>
    </main>
}

We have populated our data. Now, it should look like this:

   async function addCityHandler(e) {
        "use server";
        const cityName = e.get("cityName")?.toString();
        const buildingNo = e.get("buildingNo")?.toString();
        const zipcode = e.get("zipcode")?.toString();
        const state = e.get("state")?.toString();
        const country = e.get("country")?.toString();
        if (!cityName || !buildingNo || !zipcode || !state || !country) {
            console.log("Please fill in all fields.");
            return;
        }
        const data = {
            cityName,
            buildingNo,
            zipcode,
            state,
            country
        };
        const requestOptions = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        };
        await fetch('https://64b588e1f3dbab5a95c77074.mockapi.io/citylist', requestOptions)
    }

Create an `addCityHandler` function and append it to the form action.

Use server is important so that Next.js will consider this as a server Action.

After that, fill in the details on the form and submit the data. It will post the data through our server, and we don't have to expose any of our API endpoints.

in server

┌ POST /city 200 in 1958ms
│
└──── POST https://64b588e1f3dbab5a../citylist

We have posted our data successfully, but it should also update the UI without manually refreshing, right? Hold tight.

Revalidate with Next tags and remove caches

  const res = await fetch('https://64b588e1f3dbab5a95c77074.mockapi.io/citylist', {
        method: 'GET',
        cache: 'no-cache',
        next: { tags: ['city'] }
    })
    const citylist = await res.json()

Set the cache to cache: 'no-cache'.
Add tags next: { tags: ['city'] }.

Revalidate

After executing our post function, just use:

revalidateTag('city')

This will make sure that the latest data is fetched again only for this particular endpoint whose tag is city, and it won't cause any performance problems for other endpoints used on the same file.
UI updates streamed by server components, and we don't need to manually refresh to see the changes.

backingFormData.forEach is not a function Error

It's important to know that while using server actions, I got this error:

backingFormData.forEach is not a function

If you face the same problem, update your Node.js to the latest version or use version 20+ to avoid this issue.

Thanks for reading until the end!

TypeScript Cheat sheet

PREM KUMAR — Fri, 01 Jul 2022 09:14:21 +0000

TypeScript CheatSheet

want to edit this file ? https://github.com/premshetty/tscCheatsheet

basic types

let id: number = 5;
let fname: string = "Max";
let isCool: boolean = true;
let x: any = [1, true, 3];

tuple

let tuple: [number, string] = [1, "Max"];

tuple array

let tupleArray: [number, string][] = [
  [1, "Max"],
  [2, "Manu"],
  [3, "Max"],
];

union types

let union: number | string = "Max";

enums

enum Direction1 {
  Up = 0,
  Down,
  Left,
  Right,
}

enum Direction2 {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

objects

const user: {
  name: string;
  age: number;
  hobbies: string[];
} = {
  name: "Max",
  age: 30,
  hobbies: ["Sports", "Cooking"],
};

object with type

type user1 = {
  name: string;
  age: number;
  hobbies: string[];
};

const user1 = {
  name: "Max",
  age: 30,
  hobbies: ["Sports", "Cooking"],
};

type assertions

let cid: any = 1;
let customerIdasNum = cid as number;

functions

function addNum(x: number, y: number): number {
  return x + y;
}

// void type for no return value
function log(message: string | number): void {
  console.log(message);
}

interfaces || custom types

interface User {
  readonly name: string; // readonly means that the property can only be read, not written
  age: number;
  experience?: number; //add? for optional property
}

const user2: User = {
  name: "Max",
  age: 30,
};

customtype

type point = number | string;

const p1: point = 1;

interfaces with functions

interface addFunction {
  (x: number, y: number): number;
}

const add: addFunction = (x: number, y: number): number => {
  return x + y;
};

classes

class Person {
  private id: number; // private means that the property can only be read, not written
  name: string;
  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }
  register() {
    console.log(`${this.id} is registered`);
  }
}
const prem = new Person(1, "Prem Kumar");
const prem1 = new Person(2, "kumar kumar");
prem.register();

generics reusable components with type parameters

function getArray<T>(items: T[]): T[] {
  return new Array().concat(items);
}

let numArray = getArray<number>([1, 2, 3]);
let strArray = getArray<string>(["Max", "Manu"]);

want to edit this file ? https://github.com/premshetty/tscCheatsheet

Where Should you use async and defer ? Good SEO-practices

PREM KUMAR — Tue, 17 May 2022 07:30:21 +0000

share your Knowledge as well

Lets see the difference between async and defer first

normal Script Execution

Keep only important Scripts here , that should execute while the page loading itself

with Async

If you want a script that should be executed immediately after fetching you may use async that also helps increases the performance of your website

with Defer

and Finally defer if you want some script to execute after all the contents are loaded and executed , or any less important scripts can be executed with defer

Now you know the difference , lets also see how to use it

using Defer

<script defer src="sitewide.js"></script>
<script defer src="jquery.min.js"></script>
<script defer src="page-specific.js"></script>

using Async

<script async src="sitewide.js"></script>
<script async src="jquery.min.js"></script>
<script async src="page-specific.js"></script>

Next i will post how to reduce the unwanted Css Load stay tuned !!

you can also edit this files : github

addition tips

Don't leave Anchor Tage Empty

<a> something </a>
This will be a bad practise instead use p tag or use href inside <a> tag

How to setmeta - Set metadata on already uploaded objects,multiple Objects -GCS

PREM KUMAR — Sat, 14 May 2022 06:30:53 +0000

The gsutil setmeta command allows you to set or remove the metadata on one or more objects. It takes one or more header arguments followed by one or more URLs, where each header argument is in one of two forms:

gsutil setmeta -h [header:value|header] ... url...

setmeta to a object If you want to set cache-control to "public" then execute in Cloud Shell:

gsutil setmeta -h "Cache-Control:public" gs://<YOUR-BUCKET-NAME>/objectName

setmeta to multiple object If you want to set cache-control to "public" then execute in Cloud Shell:

gsutil setmeta -h "Cache-Control:public" gs://<YOUR-BUCKET-NAME>/*.*

*.* will add add the files inside the directory

Be a Opensource Contributor

How to Gzip - compress a gcp file while uploading to google cloud , AWS for better SEO

PREM KUMAR — Wed, 11 May 2022 05:36:34 +0000

Why you need to enable gzip or anyother compression to increase the page speed?

check thi sout !!

Now lets's get started

Google Cloud Storage (GCS) by default serves files uncompressed. There is however an option to enable gzip compression for selected files. There is a catch though. It’s only possible to use static compression which means that the files need to be uploaded already compressed to the storage. Some servers allow you to use dynamic compression which means that they will compress files on the fly when the files are requested by a client but unfortunately GCS, as I mentioned, doesn't do this.
There are two ways to upload multiple files to gcp , we will use gsutil



gsutil -m cp -r -z css,js,map [LOCAL_DIR] gs://[BUCKET]/[REMOTE_DIR]

-z this z will take care of compressing your files before uploading to gcp and it will serve compressed files to user so that the page speed will be increased

To increase page speed more use cache control also



gsutil -h "Content-Type:text/html" \
       -h "Cache-Control:public, max-age=3600" cp -r images \
       gs://bucket/images

this will helps reduce the image dowloading time and also increase your page speed

You can see what metadata is currently set on an object by using

gsutil ls -L gs://the_bucket/the_object

check if the gzip compression enabled or not on your website

and checking (for example, by using the web browser's development tools) if the response contains content-encoding: gzip and content-type: application/javascript (for JS) headers, e.g.:

For Aws Cloud front

open up the CloudFront Console, locate your distribution, and set Compress Objects Automatically to Yes in the Behavior options

Now enjoy the light house Score

Save this post for future reference

DEV Community: PREM KUMAR

next js 13.4 server Action step by step guide

Install the latest Next.js

Enable experimental Server Action

API for testing server Action

mockAPI setup

Let's create a form in page.js

Create an addCityHandler function and append it to the form action.

Revalidate with Next tags and remove caches

Revalidate

backingFormData.forEach is not a function Error

TypeScript Cheat sheet

TypeScript CheatSheet

want to edit this file ? https://github.com/premshetty/tscCheatsheet

basic types

tuple

tuple array

union types

enums

objects

object with type

type assertions

functions

interfaces || custom types

customtype

interfaces with functions

classes

generics reusable components with type parameters

want to edit this file ? https://github.com/premshetty/tscCheatsheet

Where Should you use async and defer ? Good SEO-practices

Lets see the difference between async and defer first

normal Script Execution

with Async

with Defer

Now you know the difference , lets also see how to use it

using Defer

using Async

addition tips

Don't leave Anchor Tage Empty

How to setmeta - Set metadata on already uploaded objects,multiple Objects -GCS

How to Gzip - compress a gcp file while uploading to google cloud , AWS for better SEO

Why you need to enable gzip or anyother compression to increase the page speed?

Now lets's get started

To increase page speed more use cache control also

You can see what metadata is currently set on an object by using

check if the gzip compression enabled or not on your website

For Aws Cloud front

Let's create a form in `page.js`

Create an `addCityHandler` function and append it to the form action.