Over the past few months, I've come to know React, Next.js, and TypeScript — these tech stacks have become an indispensable milestone on my journey of exploring the web.
👈 This is where I learned it
It all started with a new project proposed by my teacher: a personal Online Judge system where I could host my own contests. But what framework should I use to build it? A long time ago, I came across the styling library mdui, which provided many beautiful Material Design components and showed me how magical <div> can be. So I used it along with basic .html files to build my first website on Github Pages. However, when dealing with different pages — say a home page and an about page — there was a most头疼problem. Let me give an example.
Suppose there's a Home page and an About page, each with a navigation bar where the links point to the other page, like this:
一个 Home 页面，上方导航栏中有指向 About 页面的链接
一个 About 页面，上方导航栏中有指向 Home 页面的链接
Looks pretty good. But things never go that smoothly. Suppose one day I add a new page called Download. Now, I'll copy the Home page as a template for this new Download page.
notion image
 
At this point, each page's navigation bar needs an additional link so that I can access the Download page. How should I do this? You might immediately think, "Just add a link to Download on every page!" Well, that's exactly what I thought at first.
So now I need to add a link to every page's navigation bar. Like this:
notion image
 
Now we've indeed added the Download page. Let's review the steps:
  1. Copy the Home page as a template for the Download page
  1. Modify the Home page's navigation bar to add a link to the Download page
  1. Modify the About page's navigation bar to add a link to the Download page
  1. Modify the Download page's navigation bar to add a link to the About page
Wait. Isn't this too tedious? If I had 4, 5, or even 99 pages, would I have to do this for every single one of them? This is one of the limitations of traditional HTML for building websites.
To solve this problem, we need to turn this navigation bar into a file that can be reused across other pages. When a new page is added, I only need to modify the navigation bar code in one place. This is

Componentization

React leverages this concept by dividing pages into individual components. Each component is reusable, meaning you only need to write the navigation bar once and then reference it on every page. You can even treat a page as a component, where the page component contains a navigation bar component.
一个 Page 组件和一个 Navbar 组件，Navbar 组件指向 Page 组件
Now it looks great. But how do we make each Page have unique content? How should the links in the Navbar be displayed? What you need now is data.
You might think, "Just use a for loop to iterate over an array containing the links, right?" Indeed, that's the most obvious approach, but in React's core design philosophy, the more strongly recommended approach is

Declarative Programming

In other words, developers describe what should be rendered, rather than how to render it. This design approach makes code more concise, easier to understand, and maintain. Therefore, for displaying data in React, you can use the array's map function.
Going back to our earlier example, let's define what links should be in the navigation bar. We can use interface to define the properties of a link — each link is an object with a name and a URL. Then we create an array where each item is an object.
From here, everything becomes straightforward — we just need to display this data in the Navbar using map. Here's our workflow:
notion image
In the code, we create a functional React component (Navbar) that returns the content it needs to render (the navigation bar). The links in the navigation bar are displayed by iterating over the data with map.
Let me explain:
  1. In React, you can use JSX syntax to represent HTML tags (DOM).
  1. Data enclosed in {} are expressions. For example, navbarLinks.map() is an expression, and accessing the href and name of each link within the map function are also expressions. A for loop is not. This embodies declarative programming.
  1. React also has the virtual DOM feature — the virtual DOM is an abstraction and simulation of the real DOM. When the virtual DOM changes, it compares with the previous virtual DOM tree and calculates the minimal set of changes. That's why we need to add a key property to each link — no matter how the data changes, React can identify elements by their key to determine whether they're new or existing, rather than re-rendering all data.
Now, we need to place the Navbar into each page. A new question arises: "How do we handle navigation between pages?" Going back to the beginning of this article, I also discovered Django — a Python-based framework for building websites (before I knew React). It integrates both frontend and backend together, but I abandoned it at the time. Later, after learning React scaffolding, I discovered Next.js — an ideal framework for me to build websites. Each page is a React component with features like SSR (Server-Side Rendering), plus a rich set of tools and built-in components such as the Image component for optimized image display, Cookie support, LocalStorage, and more.

Full-Stack Development

In Next.js, each page is a page component corresponding to each html that users visit. We can also represent parent-child relationships between pages through folders. Additionally, each page has a layout component that defines its styling, such as setting titles, fonts, etc. Here's how it's shown in the official documentation:
notion image
Since a layout is a component, we can leverage React's component reusability by importing and adding the Navbar to the layout. In other words:
notion image
Now, create the download and about folders and add a page.tsx file in each. This achieves our original goal: displaying the Navbar on every page without needing to modify each page individually when changes occur. Just like how you can see a navigation bar that stays at the top of the page on Choneas's personal website, along with this article's title.

Conclusion

This article is not a "how to build a website" tutorial, but rather a brief description through an example of how I gradually learned web development. I think it can serve as a small guiding light on the path of web development, helping you figure out what to learn next through self-study. This is also my first relatively formal article, and it may contain many sentences lacking academic rigor.
Regardless, I hope this helps you. Feel free to let me know through the "comments" section.

What's Next

If you want to build a real project, you can also add an avatar or a search box to the Navbar , or implement a user system using third-party libraries like MongoDB or Supabase. You can also use AntDesign, HeroUI, Tailwindcss, or MDUI to add beautiful styles and pleasing components to your website. You can even use next-mdx-remote to build a blog system with Markdown — whether an article is a draft or its secondary description is entirely up to you. You can also use next-intl to implement internationalization for your website.
All of this is part of an ongoing process of discovery. In the future, there may be even better solutions — for example, the recently released Turbo. It aims to replace Webpack, bringing faster build speeds and a more efficient development experience to Next.js development environments. There's always more happening.

References