The Main Principle of the NextJS Framework

In previous lessons, we installed the NextJS framework and got acquainted with its basic structure. It's time to get down to the main work.

The main part of NextJS is routing. Routing works as follows: when a user enters a URL in the browser's address bar, the NextJS framework will deliver to the browser a specific file corresponding to that URL.

Routing in NextJS is arranged in a special way. Its essence is that each requested URL corresponds to a certain folder inside src/app.

Moreover, inside the folder there must be a file named page.jsx. It is this file that will be delivered to the browser. Furthermore, in this file we will write code in JSX, and the browser will receive the finished HTML code of the page.

Let's look at an example. Suppose we want the URL /test/ to return some text.

Let's create the corresponding folder: src/app/test. Inside this folder, let's create a file page.jsx with the following content:

export default function Test() {
	return <h1>hello, user!</h1>;
}

Open our URL in your browser: /test. And you will see the text we wrote inside the JSX file.

Try changing the text and saving the file. After this, the text will automatically change in the browser as well. This is how NextJS works in development mode.

Make it so that when accessing the address /about, the browser displays a message with your first and last name.