Welcome to the Guided: Build a Next.js Finance Application lab.

Throughout this lab you will become familiar with the latest features of Next.js. This will include learning more about the app directory and how it can be used for custom routes. You will build React server components, add to a Next.js layout, and learn more about Next.js pages. By the end of this lab, you should be familiar with how to use Next.js to create a front-end client application from scratch. This lab is all about building a small application while learning about and applying features brought to you by Next.js.

To start, you have been given the bones of a Next.js application. This includes something very similar to what is available upon starting a Next.js application using the command npx create-next-app@latest in your own environment. By the end of this lab, you will have created a basic expenses page, income page, budget planning page, and reports page. Over the course of this lab, the Guided: CRUD Operations for a Next.js Finance Application lab, and the Guided: Daisy UI and Tailwind CSS to Style a Next.js Finance Application lab, the pages mentioned above will become a cohesive application a user could use to manage and track their finances in.

You do not need any previous experience with Next.js to complete this lab. However, it would benefit you to have some prior and basic experience with React, JavaScript, and JSX. However, details on Next.js paradigms and design patterns will be given to provide context for your implementations in each step.

There is a solution directory that you can refer to if you are stuck or want to check your implementations at any time. Keep in mind that the solution provided in this directory is not the only solution, so it is acceptable for you to have a different solution so long as the application functions as intended.

You can launch your application by entering npm run dev in the Terminal. The results of your code can be seen in the Web Browser tab or by opening the following link: {{localhost:3000}}.

Next.js Overview

Next.js is a popular open-source React framework that's used for building server-side rendered or statically-generated web applications. Next.js simplifies the process of building React applications by providing a lot of built-in features and optimizations.

Here are some key features of Next.js:

1. Server-side rendering: Next.js allows you to render React components on the server side before sending them to the client, which can improve initial page load performance.

2. Static site generation: Next.js can generate static HTML files for your pages at build time, which can result in faster page loads. This is especially helpful for content that does not change often.

3. File-based routing: Next.js uses a file-based routing system, where the structure of your pages directory determines the routes of your application. This makes it intuitive to create new pages and organize your project.

4. API routes: Next.js allows you to create API endpoints within your application using the api directory, making it easy to build backend functionality alongside your frontend code. This makes it a true full-stack framework. Most React applications are built with some sort of backend in another framework, for example Express on top of Node.js, but this is not necessary with Next.js.

5. Automatic code splitting: Next.js automatically splits your code into smaller bundles, allowing for better performance by only loading the JavaScript required for each page.

6. Built-in CSS and Sass support: Next.js provides built-in support for CSS and Sass, allowing you to import CSS files directly into your components. As well as the support to incorporate Tailwind CSS from the beginning of your application.

7. Image optimization: Next.js optimizes images automatically, providing features like lazy loading and automatic resizing to improve performance.

Overall, Next.js is a powerful tool for building React applications with features tailored for performance, developer experience, and scalability.

Starting a Next.js Project

You can start any Next.js project if you have Node installed. In your own environments, you can run the command npx create-next-app@latest in any terminal, answer a few prompts around the setup of your project with yes or no (Next.js has defaulted choices if you do not specify otherwise), and that is it! After that, you would have a freshly bootstrapped Next.js application that can be started with the command npm run dev.

Aside from a few minor additions and deletions, the bones for your finance application in this lab were created using the above command, so this will not be necessary in this environment. If you are curious, the project was created by selecting the use of JavaScript, Tailwind CSS, App Router when prompted during setup.

Next.js Routers and File Structures

Next.js applications have two different routers that can be used that dictate their file structures and naming conventions. The two different kinds of routing are referred to the Pages router and the App router.

The Pages router is the old routing mechanism based on the file system structure within the pages directory of your Next.js application. This routing option is generally no longer used, but is still supported for backwards compatibility.

The App router is the new mechanism used for navigating between pages programmatically within the Next.js application. It allows for dynamic navigation based on user interactions or application logic and integrates well with other parts of the application like handling submissions or authentication flows. In this format, all pages for an application live in the app directory of a project.

The finance application you will be building is going to be supported by the App router.

File Structure Overview

Take a moment to explore the file structure. This is what a Next.js application will look like when it is bootstrapped using the create-next-app command.

As usual, if you are familiar with other React applications, package.json is where you can see your application's dependencies and scripts. In this file under 'dependencies', you can see a boilerplate Next.js application has dependencies to Next,.js, React, React-DOM, and (because you elected for this) Tailwind CSS. The 'scripts' section is where you can see the different startup scripts of the application. For example, the dev script is run when you start the application with the command npm run dev.

Less important files, but still worth noting nclude the configuration files you see for some of your dependencies, the node module folder, and the .next folder (which is mostly helpful when building production code).

Now, examine the app folder. This is where everything you will write to create the finance application will go. This is where pages, components, and API route handlers will live. In Next.js applications, this is where you can find all source code.

If you look at page.js under the app directory, this is where the application’s homepage is. This is what you see when you navigate to localhost:{port} after starting the application in dev mode. In Next.js, a page is the unique UI for a publicly accessible route. If you see a file titled page anywhere in any Next.js application that uses the App router, then you know this is where a UI is created. The file extension for page is dependent on the language, but for this lab it will be .js or .jsx.

Next, you can preview the layout.js file under the app directory. A layout in Next.js, represents a shared UI among a page segment and its children. This is a great place to display the application's navigation bar and footer. In the root layout.js file, you are already rendering a basic navigation bar.

Under the app folder you have an api directory with mock data. This is where you can write API Handlers in the other lab mentioned. You will also see a directory titled, (ui) with the following subdirectories: components, expenses, income, plan, and reports. A basic navigation bar has been started for you in the components directory. The remaining four directories represent future pages of your application that you will be creating in the next step.

Expenses Page and Routing

In the expenses folder, create a file called page.jsx. You may in the future use JSX features on this page which is why you are using the jsx notation over the js, but if you knew you would not be using any JSX features, a js file would work instead.

Inside the expenses/page.jsx file, create a simple component named ExpensesPage.

To see this page, start the application in dev mode, go to the Web Browser tab, and visit http://localhost:{port}/expenses. You should now see your newly created Expenses page.

Now that you have an Expenses page and its route (in Next.js a folder that contains a page is granted a route), add it to a navigation menu on your home page.

import Link from "next/link";

export default function NavBar() {
  return (
    <nav>
      <Link href="/">Home</Link> | <Link href="/expenses">Expenses</Link>
    </nav>
  );
}

Income, Reports, and Plan Pages

Just as you created an Expenses page above, create an IncomePage component in a new file located at income/page.jsx. Please also create the ReportsPage component in a new file located at reports/page.jsx and the PlanPage component in a new file located at plan/page.jsx.

Then add these to your nav-bar component which is rendered in your root layout for navigation. You can visit the application in the Web Browser tab to ensure it works.

Reference the solution directory if you are not sure how to do this.

Nested And Dynamic Routes

Lastly, nested routes and dynamic routes are possibly within Next.js.

You are going to add a nested route under expenses that will be added onto to display additional information about an expense in the Guided: CRUD Operations for a Next.js Finance Application lab. Since this is a page that is specific to an expense, you will want to use a dynamic route that follows /expenses/[id].

Now that you have a dynamic route page for an expense, you can visit /expenses/1 in the Web Bowser to see this new page.

In the Guided: CRUD Operations for a Next.js Finance Application lab, you will go over how to use Next.js's Link component to display a dynamic route from the client.

Final Note About Route Groups

As you have seen in the app directory, there is a subdirectory titled, (ui). This directory is purely there for organizational purposes and defines a Route Group. When you create a new folder using parentheses (), the name won't be included in the URL path. So /(ui)/page.tsx becomes / and subsequently /(ui)/expenses/page.tsx becomes /expenses/page.tsx.

Progress Report

At the end of this step, you should have four functioning static routes with pages and one dynamic route with a page in the Next.js finance application.

The application is still pretty bare bones at the moment, but the Guided: CRUD Operations for a Next.js Finance Application lab will continue to flush it out.

A Note About Metadata APIs

Next.js React Server Side Components can have a metadata api. This is a metadata object that contains key information about a page like a title, description, and keywords.

At this time, you can find a metadata object in app/layout.js. Please add some relevant keywords to your metadata object. Keywords can be helpful for dearch engine optimization (SEO) which helps rank your application/website higher on Google. SEO is another cool feature Next.js is supplied with. Metadata objects can be found in pages and layouts.

Once you have added keywords to the metadata object mentioned above, the object may look something like:

export const metadata = {
  title: "My Budget",
  description: "Budget Application",
	keywords: "budget money, how to budget, expenses vs income, finance goals",
};

In this lab, you created the skeleton for all the pages that will be in a Next.js Finance Application.

You should be familiar with Next.js pages, layouts, routes, file structure, and key features/advantages.

If you would like to continue developing this Finance application to learn even more about Next.js, please continue with the following labs; Guided: CRUD Operations for a Next.js Finance Application, and Guided: Daisy UI and Tailwind CSS to Style a Next.js Finance Application respectively.