NEXT JS STARTER PACK

#tutorial #webdev #react #nextjs

Hello my frontend developers, today i will be showing some libraries and packages which you could add in your next js project to make it more efficient, fast, error prone, customizable, and type-safe.

Lets' get started...

Introduction
Tailwind CSS
Next UI
React Hook form and Zod
Zustand
Prettier and ESlint

Introduction

Well, many of you already know that while making a project we have to deal with many things like creating styles and layouts, form handling and validations, data fetching, creating functionalities, state management, etc. handling these things manually could be cumbersome. Instead, we are going to use libraries to handle these things for us.

Tailwind CSS

Let's start with the css, writing css could be messy with larger projects with lots of files, different styles, overriding classes, resetting css, utilities and all. It could take so much time to just setup the css stylesheets for the project. Tailwind is your savior for this problem, It utility-first CSS framework packed with classes like flex, grid, text-center, mt-10, etc that can be composed to build any design, directly in your markup. It's fast, flexible, and reliable — with zero-runtime.

Documentation

Example

<div class="mx-auto max-w-sm bg-gray-100 mt-20">
  <div class="rounded-lg bg-slate-900 py-3 text-slate-100">
    <h2 class="text-center font-sans text-2xl md:text-3xl lg:text-4xl">Tailwind Card</h2>
  </div>
  <div class="bg-slate-00 text-balance p-5 font-sans text-base text-slate-900 md:text-lg">Tailwind is your savior for this problem, It utility-first CSS framework packed with classes like flex, grid, text-center, mt-10, etc that can be composed to build any design, directly in your markup. It's fast, flexible, and reliable — with zero-runtime.</div>
  <div class="rounded-lg bg-gray-800 py-5 text-center">
    <a href="https://tailwindcss.com/docs/installation" class="inline-block rounded-xl bg-gray-100 px-4 py-2 text-gray-900" target="_blank">Documentation</a>
  </div>
</div>

Output

NEXT UI

It is a UI component library which helps you to create beautiful, highly customized and accessible components like buttons, accordions, cards, dropdowns, navbar, footer, forms, etc.

Documentation

Example

 <Card className="py-4 w-fit bg-gray-200 text-slate-900">
  <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
    <p className="text-tiny uppercase font-bold">Daily Mix</p>
    <small className="text-default-500">12 Tracks</small>
    <h4 className="font-bold text-large">Frontend Radio</h4>
  </CardHeader>
  <CardBody className="overflow-visible py-2">
    <Image
      alt="Card background"
      className="object-cover rounded-xl"
      src="https://nextui.org/images/hero-card-complete.jpeg"
      width={270}
    />
  </CardBody>
</Card>

Output

React hook form and Zod

React hook form is a form handling library which is Performant, flexible and extensible with easy-to-use validation.
Zod is a validation library which has many inbuilt methods to validate your input data without have to worry about writing logics manually
@hookform/resolvers is a resolver library for react hook form, basically it helps in binding zod validations to react hook form inputs.

Documentations

React hook form
Zod
@hookform/resolvers

Example

"use client";
import React from "react";
import { FieldValues, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";

// NEXT UI Components
import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure } from "@nextui-org/modal";
import { Button } from "@nextui-org/button";

const schema = z.object({
  name: z.string().min(1, { message: "Name is required" }),
  age: z
    .number({
      invalid_type_error: "Age must be a number",
    })
    .positive({ message: "Age must be positive" })
    .gt(18, { message: "Age should be greater than 18" }),
});

const Form = () => {
  const {
    register,
    handleSubmit,
    reset,
    watch,
    formState: { errors, isSubmitSuccessful },
  } = useForm({
    mode: "all",
    resolver: zodResolver(schema),
  });

  const onSubmit = (data: FieldValues) => {
    console.log(data);
    if (isSubmitSuccessful) {
      onOpen();
    }
  };

  const name = watch("name");

  // NEXT UI MODAL STATES
  const { isOpen, onOpen, onOpenChange } = useDisclosure();
  return (
    <div className="grid justify-center">
      <form
        className="grid gap-y-4 p-10 rounded-xl border border-white"
        onSubmit={handleSubmit(onSubmit)}
      >
        <div>
          <h2 className="text-xl md:text-3xl font-sans font-bold text-center">USER</h2>
        </div>
        <div className="min-h-10 min-w-72">
          <input
            className="w-full px-4 py-2 border border-slate-700 rounded-lg"
            {...register("name")}
            placeholder="Name"
          />
          {errors.name?.message && <p className="text-red-500">{errors?.name?.message as string}</p>}
        </div>
        <div className="mb-6">
          <input
            className="w-full px-4 py-2 border border-slate-700 rounded-lg"
            type="number"
            placeholder="Age"
            {...register("age", { valueAsNumber: true })}
          />
          {errors.age?.message && <p className="text-red-500">{errors?.age?.message as string}</p>}
        </div>
        <input
          className="px-4 py-2 bg-blue-500 text-white w-fit rounded-lg cursor-pointer"
          type="submit"
        />
      </form>

      {/* NEXT UI MODAL */}
      <Modal
        isOpen={isOpen}
        onOpenChange={onOpenChange}
        hideCloseButton
      >
        <ModalContent className="font-sans">
          {(onClose) => (
            <>
              <ModalHeader className="flex flex-col gap-1">Hey {name}</ModalHeader>
              <ModalBody>
                <h2 className="text-2xl font-bold">Thank you for filling out the form</h2>
              </ModalBody>
              <ModalFooter>
                <Button
                  color="danger"
                  variant="solid"
                  onPress={() => {
                    onClose();
                    reset(); // Form reset
                  }}
                >
                  Close
                </Button>
              </ModalFooter>
            </>
          )}
        </ModalContent>
      </Modal>
    </div>
  );
};

export default Form;

Output

Zustand

It is basically a state management library just like redux but more light weight, flexible, simple and fasy.

Documentation

Example

// store.ts
import { create } from "zustand";
import { persist, createJSONStorage } from "zustand/middleware";

// Define the state and action types
interface State {
  loggedIn: boolean;
  setLoggedIn: (loggedIn: boolean) => void;
}

// Create the Zustand store with type definitions and persistence
export const useStore = create<State>()(
  persist(
    (set) => ({
      loggedIn: false, // use false for boolean
      setLoggedIn: (loggedIn: boolean) => set({ loggedIn }),
    }),
    {
      name: "food-storage", // name of the item in the storage (must be unique)
      storage: createJSONStorage(() => sessionStorage), // (optional) by default, 'localStorage' is used
    },
  ),
);

// App.tsx
"use client";
import { useStore } from "@/store/useStore";
import React from "react";

const Zustand = () => {
  const loggedIn = useStore((state) => state.loggedIn);
  const setLoggedIn = useStore((state) => state.setLoggedIn);

  return (
    <div className="bg-gray-900 text-white min-h-[calc(100vh-64px)] p-8">
      <section className="flex flex-col items-center gap-10">
        <div className="flex items-center gap-6">
          <h3>User - {loggedIn ? "Logged In" : "Logged Out"}</h3>
          <button
            className={`px-4 py-2 inline-block rounded-lg text-white ${loggedIn ? "bg-red-500" : "bg-green-500"}`}
            onClick={() => setLoggedIn(!loggedIn)}
          >
            {loggedIn ? "Logout" : "Login"}
          </button>
        </div>
        <p className="text-lg font-sans mb-4">Login and refresh the page, the state will persist</p>
      </section>
    </div>
  );
};

export default Zustand;

Output

Prettier Eslint

Prettier is a code formatting tool which helps in detecting issues related to formatting and also helps in resolving the formatting automatically while eslint is used to find linting errors like only allow single or double quotes, 100 characters per lines, variable defined but not used, etc, using eslint fix scripts, we could automatically fix these type of errors.