Posts

Showing posts from May, 2025

NextJS Notes

  Reactjs is a Library and Nextjs is a Framework which is build on top of Reactjs, so before understanding what exactly is Nextjs, firstly we need to understand what is the difference between a library and a framework. Aspect JavaScript Library JavaScript Framework Definition A collection of functions and utilities for specific tasks A complete structure to build and manage an application Control Flow You call the library (you’re in control) Framework calls your code (framework is in control) Inversion of Control ❌ No inversion — you’re in charge ✅ Yes — framework dictates structure and flow Scope of Use Narrow, specific — often for a particular feature Broad — full application architecture Dependency Optional — can use as needed Mandatory — dictates how components interact Learning Curve Usually low — easier to integrate Higher — requires understanding framework’s patterns and structure Flexibility High — you choose when and how to use Low — must follow framework rules and lifec...

Enable the @ alias syntax in your Vite + React project

To enable the @ alias syntax in your Vite + React project (so you can import files like @/components/Button ), you need to configure path aliases in two places: ----------> THIS WAY IS FOR JAVASCRIPT IN REACT + VITE Run this Command => npm i path ✅ 1. Configure Vite Alias In your vite.config.js : import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import path from 'path' import { fileURLToPath } from 'url' const __dirname = path . dirname ( fileURLToPath ( import . meta . url )) // https://vitejs.dev/config/ export default defineConfig ({   plugins: [ react ()] ,   resolve: {     alias: {       '@' : path . resolve ( __dirname , './src' ),     },   } , }) ✅ 2. Update jsconfig.json Use jsconfig.json for JavaScript. (NOTE -> if u already dont have jsconfig.json then craete it in root where u craete .env file)  Add or update: { "compilerOptions" : { "baseUrl" : ...