Project Archive

Multiple pages and routing

In the first version of our new app we saw how we could create a layout and a page for a single page. Most nontrivial apps are going to consist of multiple pages, which means that we will need a system to navigate from one page to another. In web applications, the system that manages navigation between pages is called a routing system.

Next.js offers a couple of different routing systems for us to use. The most modern routing system available is called app routing. Since this system is also the easiest to implement in practice, I will be using that routing system for my example project.

Here are the key features of this system:

• To set up distinct pages in our application we use a system of subfolders inside the app folder.
• The app router will treat any subfolder that contains a page.tsx file as a navigable route.
• To do navigation in our app we will use the Next.js Link component in place of the HTML <a> element.

Some new pages

If you download the folder for the second version of our app by clicking the button above you will see that the app folder now has a couple of subfolders named 'create' and 'list'. These routes will eventually host pages that implement the two main bits of functionality in our app. Pages in the /create route will allow the user to create new surveys, while pages in the /list route will allow the user to view existing surveys.

Right now the page.tsx files for both of these routes a simple "coming soon" placeholders.

A navigation sidebar

The other major new feature that I added to this version is in the app/layout.tsx file. I have modified the layout to include the use of a new Sidebar element, which sets up a sidebar with navigation links in it.

The code for the Sidebar element appears in app/ui/sidebar.tsx. Since our app will eventually consist of a number of custom component classes, I will be following the Next.js convention of putting the code for my custom components in a ui folder in the app folder.

Here is the code for the Sidebar element:

export default function Sidebar() {
    return (
        <aside className="w-64 bg-gray-100 text-gray-700 py-8 px-4">
            <div className="font-bold text-lg mb-4">Menu</div>
            <nav>
                <Link key="listSurveys" href="/list" className="block py-2 px-4 rounded">
                    Surveys list
                </Link>
                <Link key="createSurvey" href="/create" className="block py-2 px-4 rounded">
                    Create Survey
                </Link>
            </nav>
        </aside>
    );
}

The Sidebar is an HTML <aside> element with a <nav> element inside it. The <nav> element contains a couple of Next.js Link elements that will interact with the routing system to take us to the /list and /create subpages.

I have also applied some Tailwind CSS utility classes to the new page components to help the Sidebar stand out visually. I will have more to say about how Tailwind works in a later lecture in this series.