Posts

Showing posts with the label nextjs

2. NextJS: Create custom modal with TS and Tailwind CSS

Image
We'll need a button to launch our custom modal, so when we click the "Open Modal" button, our custom modal should appear. <button className="rounded-md border h-10 px-4 text-white bg-blue-600 hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2  focus-visible:outline-blue-600" type="button" onClick={() => setModalClose(!modalClose)} >Open Modal</button> We will create a state to manage the opening and closing of modal. By default the modal is closed. 'use client' import { useState } from 'react' ... const [modalClose, setModalClose] = useState(true); Ok, now let's create our custom modal Install a package clsx, it will help us dynamically add or remove className at run time based on state change. npm i clsx Following is modal <div></div>: {/* Modal */}       <div id="custom-modal" tab-index="-1" aria-hidden="true"         className=...
Post a Comment
Read more

1. NextJS: Create project with TS and Tailwind CSS

Image
Follow the 2 step to Create Next JS app on current location and host it locally at port 3000. Steps 1. npx create-next-app@latest ./ As seen in the image below, make sure you choose Yes for required option. Run your NextJS app 2. npm run dev In console: Output: (Go to http://localhost:3000 in your browser)
Post a Comment
Read more

How to create an API in Next.js

Image
Next.js , an advanced React framework, streamlines web application development with features like server-side rendering and automatic code splitting. Creating APIs in Next.js is advantageous due to its built-in API routes feature, offering a seamless and integrated approach for handling server-side logic or connecting to databases. This simplifies the development process, ensuring efficient communication between the frontend and backend within the same framework. Route Handlers allow you to create custom APIs. Note: Route Handlers are only available inside the app directory.  Route Handlers are defined in a route.js|ts file inside the app directory. app/api/route.ts export const dynamic = 'force-dynamic' // defaults to auto export async function GET(request: Request) {} Supported HTTP Methods are: GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS . Example: export async function GET() {   const res = await fetch('https://data.mongodb-api.com/...', {     ...
Post a Comment
Read more

Steps to Configure Postgres in Vercel with your Next.js project

Image
Vercel is a cutting-edge cloud platform renowned for its seamless deployment and hosting solutions, designed to simplify the process of deploying web applications. With its emphasis on serverless computing, global content delivery, and continuous deployment, Vercel empowers developers to focus on building exceptional user experiences. Hosting Postgres on Vercel enhances your application's performance and scalability.  Leveraging Vercel's serverless architecture and global CDN ensures rapid access to your database, while its straightforward integration and automatic scaling capabilities make managing Postgres hassle-free, allowing you to concentrate on crafting robust and efficient applications. Steps 1. Create a project 2. Go to Storage 3. Create Postgres database Connect Store → Create New → Postgres → Continue 4. Copy the secret to .env file 5. Install Postgres sdk npm i @vercel/postgres
Post a Comment
Read more