{"id":1376,"date":"2026-07-30T05:44:23","date_gmt":"2026-07-30T05:44:23","guid":{"rendered":"https:\/\/www.projectimmerse.com\/blog\/?p=1376"},"modified":"2026-07-30T19:56:27","modified_gmt":"2026-07-30T19:56:27","slug":"building-my-first-next-js-project-components-props-arrays-and-dynamic-progress-bars","status":"publish","type":"post","link":"https:\/\/www.projectimmerse.com\/blog\/building-my-first-next-js-project-components-props-arrays-and-dynamic-progress-bars\/","title":{"rendered":"Building My First Next.js Project: Components, Props, Arrays, and Dynamic Progress Bars"},"content":{"rendered":"\n
\"Building<\/a>
Building a Project Progress Tracker while learning the fundamentals of Next.js, React, TypeScript, and dynamic UI development.<\/figcaption><\/figure>\n\n\n\n

Learning a new framework is always a little strange at first.<\/p>\n\n\n\n

You install a bunch of packages, the terminal spits out enough text to make you question your career choices, and suddenly you’re staring at files with names like page.tsx<\/code> wondering what exactly you signed up for.<\/p>\n\n\n\n

That\u2019s where my latest project begins.<\/p>\n\n\n\n

I\u2019m building a simple Project Progress Tracker with Next.js<\/strong>. The idea is straightforward: create an application that tracks the other applications I build, including how far along each project is.<\/p>\n\n\n\n

Yes, I\u2019m building a project to track my projects. We\u2019re officially through the looking glass.<\/p>\n\n\n\n

More importantly, the app gives me a practical way to learn Next.js and React concepts instead of working through isolated examples that never turn into anything useful.<\/p>\n\n\n\n

So far, I\u2019ve covered components, props, TypeScript types, arrays, objects, .map()<\/code>, JSX, Tailwind CSS, and dynamic progress bars.<\/p>\n\n\n\n

Here\u2019s what I\u2019ve learned along the way.<\/p>\n\n\n\n\n\n\n\n

\n\n\n\n

Starting With Next.js<\/h2>\n\n\n\n

The project was created using create-next-app<\/code>, which gives you the basic structure needed for a modern Next.js application.<\/p>\n\n\n\n

One of the first important files is:<\/p>\n\n\n

\napp\/page.tsx\n<\/pre><\/div>\n\n\n
With the Next.js App Router, this file represents the application’s home page.<\/p>\n\n\n\n
Visit:<\/p>\n\n\n
\nlocalhost:3000\n<\/pre><\/div>\n\n\n
and Next.js renders the component exported from page.tsx<\/code>.<\/p>\n\n\n\n
My first version was intentionally simple:<\/p>\n\n\n
\nexport default function Home() {\n  return (\n    <main className="p-8">\n      <h1 className="text-4xl font-bold">\n        Project Progress Tracker\n      <\/h1>\n\n      <p className="mt-4 text-gray-600">\n        Track every app you build from idea to deployment.\n      <\/p>\n    <\/main>\n  );\n}\n<\/pre><\/div>\n\n\n
There isn’t much happening yet, but even this small example introduces several important concepts.<\/p>\n\n\n\n
The Home<\/code> function is a React component.<\/p>\n\n\n\n
The markup inside return<\/code> is JSX.<\/p>\n\n\n\n
And classes such as:<\/p>\n\n\n
\np-8\ntext-4xl\nfont-bold\nmt-4\ntext-gray-600\n<\/pre><\/div>\n\n\n
come from Tailwind CSS.<\/p>\n\n\n\n
At this stage, everything lived inside one component.<\/p>\n\n\n\n
That works when an application contains approximately two sentences.<\/p>\n\n\n\n
It becomes considerably less charming when the file reaches 900 lines.<\/p>\n\n\n\n
That brings us to components.<\/p>\n\n\n\n
\n\n\n\n
Understanding React Components<\/h2>\n\n\n\n
One of the core ideas behind React is breaking an interface into smaller pieces called components<\/strong>.<\/p>\n\n\n\n
Instead of putting the entire application inside page.tsx<\/code>, I created:<\/p>\n\n\n
\ncomponents\/Header.tsx\n<\/pre><\/div>\n\n\n
The component looks like this:<\/p>\n\n\n
\nexport default function Header() {\n  return (\n    <header className="mb-8">\n      <h1 className="text-4xl font-bold">\n        Project Progress Tracker\n      <\/h1>\n\n      <p className="mt-4 text-gray-600">\n        Track every app you build from idea to deployment.\n      <\/p>\n    <\/header>\n  );\n}\n<\/pre><\/div>\n\n\n
A React component is essentially a JavaScript function that returns JSX.<\/p>\n\n\n\n
But creating the file doesn’t automatically make it appear anywhere.<\/p>\n\n\n\n
It needs to be imported and rendered.<\/p>\n\n\n\n
Inside page.tsx<\/code>:<\/p>\n\n\n
\nimport Header from "@\/components\/Header";\n<\/pre><\/div>\n\n\n
Then:<\/p>\n\n\n
\n&lt;Header \/>\n<\/pre><\/div>\n\n\n
The complete page becomes:<\/p>\n\n\n
\nimport Header from "@\/components\/Header";\n\nexport default function Home() {\n  return (\n    <main className="p-8">\n      <Header \/>\n    <\/main>\n  );\n}\n<\/pre><\/div>\n\n\n
The browser looks almost identical to before.<\/p>\n\n\n\n
The underlying architecture, however, is better.<\/p>\n\n\n\n
Instead of:<\/p>\n\n\n
\npage.tsx\n\u251c\u2500\u2500 h1\n\u2514\u2500\u2500 p\n<\/pre><\/div>\n\n\n
I now have:<\/p>\n\n\n
\npage.tsx\n\u2514\u2500\u2500 Header\n    \u251c\u2500\u2500 h1\n    \u2514\u2500\u2500 p\n<\/pre><\/div>\n\n\n
That distinction becomes increasingly important as an application grows.<\/p>\n\n\n\n
\n\n\n\n
Components Don’t Run Just Because They Exist<\/h2>\n\n\n\n
This was an important concept to clarify.<\/p>\n\n\n\n
Creating:<\/p>\n\n\n
\nHeader.tsx\n<\/pre><\/div>\n\n\n
doesn’t mean Next.js automatically discovers it and displays it.<\/p>\n\n\n\n
The component has to be used somewhere.<\/p>\n\n\n\n
The basic flow is:<\/p>\n\n\n
\nHeader.tsx\n     \u2193\nexport Header\n     \u2193\npage.tsx\n     \u2193\nimport Header\n     \u2193\n<Header \/>\n     \u2193\nReact renders the component\n<\/pre><\/div>\n\n\n
That helped make React components feel considerably less mysterious.<\/p>\n\n\n\n
A component is essentially a function.<\/p>\n\n\n\n
This:<\/p>\n\n\n
\n<Header \/>\n<\/pre><\/div>\n\n\n
causes React to render what the Header<\/code> component returns.<\/p>\n\n\n\n
Once that clicked, building additional components made much more sense.<\/p>\n\n\n\n
\n\n\n\n
Creating a Project Card Component<\/h2>\n\n\n\n
The next component was the heart of the application:<\/p>\n\n\n
\ncomponents\/ProjectCard.tsx\n<\/pre><\/div>\n\n\n
Initially, the project card was completely hardcoded:<\/p>\n\n\n
\nexport default function ProjectCard() {\n  return (\n    <div className="mt-8 rounded-lg border p-6">\n      <h2 className="text-2xl font-semibold">\n        Portfolio Website\n      <\/h2>\n\n      <p className="mt-2 text-gray-600">\n        Progress: 75%\n      <\/p>\n\n      <p className="text-green-600">\n        In Progress\n      <\/p>\n    <\/div>\n  );\n}\n<\/pre><\/div>\n\n\n
This worked.<\/p>\n\n\n\n
Unfortunately, every project card would now be a 75%-complete portfolio website.<\/p>\n\n\n\n
Unless I somehow decided to build twelve identical portfolio websites, this wasn’t going to scale.<\/p>\n\n\n\n
That’s where props came in.<\/p>\n\n\n\n
\n\n\n\n
Understanding React Props<\/h2>\n\n\n\n
Props allow data to be passed into a component.<\/p>\n\n\n\n
Instead of permanently storing:<\/p>\n\n\n
\nPortfolio Website\n75%\nIn Progress\n<\/pre><\/div>\n\n\n
inside the component, I can provide those values whenever I create a ProjectCard<\/code>.<\/p>\n\n\n\n
For example:<\/p>\n\n\n
\n<ProjectCard\n  title="Portfolio Website"\n  progress={75}\n  status="In Progress"\n\/>\n<\/pre><\/div>\n\n\n
And another:<\/p>\n\n\n
\n<ProjectCard\n  title="Tracker App"\n  progress={100}\n  status="Completed"\n\/>\n<\/pre><\/div>\n\n\n
Same component.<\/p>\n\n\n\n
Different data.<\/p>\n\n\n\n
This is one of the concepts that makes React reusable.<\/p>\n\n\n\n
\n\n\n\n
Adding TypeScript to the Props<\/h2>\n\n\n\n
Because the project uses TypeScript, the component also defines what type of data it’s expecting:<\/p>\n\n\n
\ntype ProjectCardProps = {\n  title: string;\n  progress: number;\n  status: string;\n};\n<\/pre><\/div>\n\n\n
This says:<\/p>\n\n\n\n