Overcoming Next.js confusion: A story of learning and growth

⚡ React is fast... until we make it slow. Performance in React isn’t about writing more code — It’s about helping React do less work. 🧠 Here are some areas every React dev should master 👇 🧩 1️⃣ Reduce Bundle Size → Code Split (React.lazy) → Tree-Shake unused code → Use lightweight libs → Avoid import * ⚙️ 2️⃣ Smooth Runtime → Debounce user inputs → Throttle scroll & resize events 🌍 3️⃣ Smart Context Usage → Split contexts → Or use Redux Toolkit and RTK Query for efficient state and api management 🔁 4️⃣ Prevent Unnecessary Updates → React.memo, useMemo, useCallback 🎯 5️⃣ Control Side Effects → Avoid running useEffect unnecessarily Great performance isn’t a feature — It’s the result of mindful coding. ✨ 💬 How do you keep your React app fast? #ReactJS #FrontendPerformance #WebDevelopment #JavaScript #Optimization

📸 A quick React lesson I learned while working on a project! I was building a small React app and added an “images” folder inside the src directory to store some pictures. Everything looked fine — until I tried to display them in my components. No matter what path I used, the images just wouldn’t load! 😅 After some digging, I realized that React doesn’t serve static assets directly from the src folder — it only compiles JavaScript code from there. The correct approach was to move my images folder to the public directory. ✅ Here’s what worked: <img src="/images/profile.png" alt="Profile" /> 💡 Lesson learned: Always keep your static files (like images, icons, or PDFs) in the public folder if you want to access them directly using a path. React’s build process doesn’t include files from src unless they’re imported in JS. It was a small issue, but it helped me understand how React’s build structure actually works. Every bug teaches something new — this one taught me about static asset handling! 🚀 #ReactJS #WebDevelopment #FrontendDeveloper #MERNStack #LearningByDoing #CodingJourney #JavaScript

⚛️ A small React “props” moment I’ll never forget! I was building a simple Profile component that needed to display a user’s name and role. I passed the props from the parent and expected it to just work — but nothing appeared on the screen. 😅 After checking my code multiple times, I realized I had forgotten the most important part — actually using the props inside the component! ❌ Wrong: function Profile() { return <h2>{name}</h2>; } ✅ Correct: function Profile(props) { return <h2>{props.name}</h2>; } That’s when it clicked — props are like packages 📦 that the parent sends to the child. If you don’t open (use) them properly, the child has no idea what’s inside! 💡 Lesson learned: Props make React components reusable and dynamic — but only if you remember to “unwrap” them first. 😉 Every tiny bug in React is a small reminder to pay attention to the details — because that’s where the learning happens. 🚀 #ReactJS #WebDevelopment #FrontendDeveloper #MERNStack #Props #CodingJourney #LearningByDoing

⚛️ Day 1 of my React Series — Let’s start with Components Ever wondered what a React component really is? It’s simpler than it sounds 👇 A React Component is just a JavaScript function that returns markup. But here’s the twist — it doesn’t return HTML, it returns JSX! JSX looks like HTML but works like JavaScript — that’s what makes React so powerful and declarative. 💡 In simple words: Think of components as LEGO blocks — reusable pieces that combine to build entire UIs. 🧩 One component for a button, one for a card, one for a navbar — and together, they make your app. #React #JavaScript #FrontendDevelopment #WebDevelopment #Learning #ReactJS #Frontend #Coding

It’s been about three years since I last worked on frontend development. Since then, I’ve been fully focused on backend work. Recently, I decided it was time to refresh my frontend skills — so I started exploring Next.js basics and completed this excellent crash course on YouTube Next JS 14 Crash Course by Learn with Sumit. The tutorial covers CSR, SSR, and RSC in depth, along with other key Next.js fundamentals, explained in a clear and practical way. If you want to get started with the basics of Next.js, I highly recommend this tutorial. Even though it’s based on Next.js 14, the concepts are still highly relevant and well-presented. Link of the tutorial: https://lnkd.in/gFjMYUyY

⚡ 7 Days of React — Lessons from Experience, Not Tutorials. I’ve spent years building in React — breaking things, fixing them, and learning lessons that no tutorial ever mentioned. So, for the next 7 days, I’m sharing something different 👇 Each day, I’ll break down one React principle that changed the way I think about writing clean, scalable code. No copy-paste examples. No buzzwords. Just the stuff you learn after hundreds of components, dozens of bugs, and way too many late-night debugging sessions 😅 Here’s what’s coming: Day 1: The one mistake that silently breaks your React app — mutating state. Day 2: Why adding more useState isn’t always the solution. Day 3: How to make your components smarter — without extra state. Day 4: The truth about useEffect — and when you actually need it. Day 5: That one key bug that React won’t warn you about. Day 6: The dependency trap that causes weird bugs in useEffect. Day 7: The mindset shift — writing React logic before writing useEffect. These aren’t “tips.” They’re real-world habits that separate good React developers from great ones. 🚨 Stay tuned — Day 1 drops tomorrow. Trust me, every React dev has made this mistake once. 👀 #ReactJS #Frontend #JavaScript #WebDevelopment #CleanCode #LearningInPublic #ReactTips #DeveloperLife

Understanding “Props” in React Simplified for Beginners! If you’ve just started learning React, you’ve probably heard the term “props” but what exactly are they? In simple terms, props (short for properties) are like function parameters that let you pass data from one component to another. Here’s a quick example 👇 .JSX function Welcome(props) {  return <h1>Hello, {props.name}!</h1>; } function App() {  return <Welcome name="Shafat" />; } The App component sends data to Welcome through a prop called name. ✅ Props make your components dynamic, reusable, and modular. ✅ They can be strings, numbers, arrays, objects, or even functions! ✅ But remember props are read-only (you can’t modify them inside the child component). Think of props as a way to make your UI talk to each other they keep your components connected and flexible. If you’re building in React, mastering props is your first step toward component-driven thinking! #ReactJS #WebDevelopment #Frontend #JavaScript #LearningReact #PropsExplained

🚀 React Day 3 — JSX, Babel & Components Explained I’ve just published my Day 3 blog on building a React app from scratch — this one dives into JSX, Babel, functional components, and how to simplify your React workflow using npm scripts. 🔍 Highlights ->What npx actually does and how to run local & production builds ->Adding shortcuts in package.json (npm run start, npm run build) ->What JSX is and how it makes React code cleaner and more readable ->How Babel converts JSX into browser-friendly JavaScript ->Understanding functional components and component composition If you’re starting with React or want to refresh your fundamentals, this post walks you through everything step by step with examples. 📖 Read the full blog here: 🔗 [https://lnkd.in/eFCcAumY] #ReactJS #JavaScript #Frontend #WebDevelopment #JSX #Babel #Components #CodingJourney

🚀 Day 3 of the 35 Days React Spark Challenge! Today, I explored the React project flow and structure in both Create React App and Vite — and discovered some interesting differences 👇 💡 Key Learnings: - In plain JavaScript, we manually inject our script file into the index.html to connect it with the DOM. - In React (using Create React App), we don’t manually add the script tag in index.html. The development server handles it automatically when we run commands like npm start from the scripts section of the package.json file. So even though you don’t see the script tag in the file, you can spot it in the browser’s Elements tab when the app runs. - On the other hand, Vite is a bit more strict — it enforces best practices like using uppercase component names and the .jsx extension. - While CRA might not throw visible errors for these, your components may not behave as expected if the conventions aren’t followed. Each day, I’m starting to see more clearly how React connects everything behind the scenes — from setup to rendering ⚙️ #React #Frontend #LearningInPublic #WebDevelopment #ReactSparkChallenge

⚡ “Your code doesn’t have to be perfect — it just has to be clear.” When I started learning React, I spent hours rewriting the same function — chasing perfection. No console warnings. No messy code. Just… flawless. But here’s what I learned ⬇️ 👉 Readable code beats perfect code. 👉 Progress beats perfection. 👉 Working projects > 100 tutorials. You don’t become a better developer by writing flawless code. You grow by writing, breaking, fixing, and improving code that works. Even senior developers push code that isn’t perfect — but it’s clean, functional, and maintainable. So next time your app doesn’t look “portfolio-ready,” remember: Every bug you fix, every refactor you make — is a step closer to mastery. 💪 #reactjs #frontenddeveloper #webdevelopment #javascript #learningtocode #buildinpublic