Guided: Working with React in a Next.js CRUD Application

Welcome to the Guided: Working with React in a Next.js CRUD Application lab.

You have been given an example application called Globoticket that already has most of its back-end logic implemented for you. Your goal for this lab is to complete the front-end implementation for this application and connect it to the predefined back-end logic to make the application fully functional. You are provided 2 JSON files called mockData.json and origData.json. The mockData file contains initial data and is meant to represent a "database" for storing data and changes made to it will persist across sessions. If you ever want to "reset" the data in mockData, simply paste origData into mockData.

To avoid too much exposition, you should at least have knowledge and/or experience with JavaScript and the fundamental concepts of JSX, Components, and Props in React. However, details on Next.js paradigms and design patterns will be given to provide context for your implementations in each step. By the end of this lab, you should be able to perform Create, Read, Update, and Delete(CRUD) operations in Globoticket.

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. This also applies to the Tailwind CSS stylings that are applied using className during each step.

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.

Overview

Next.js is a framework built on top of the React library. This allows developers to build the user interface of applications using the full capabilities of React while also giving them access to certain features exclusive to Next.

Next.js allows server side development through API routes/server actions, fetching data from databases, performing server side function calls, and rendering certain assets to reduce load times to the client. This means that Next.js can be considered a full-stack framework as it allows both front-end and back-end development within the same framework.

Starting a Next.js Project

You can easily start a Next.js project if you have Node installed. In your own environments, you would simply run the command npx create-next-app@latest on the command line and you will be given several prompts to answer with either a yes or no. Once answered, the command a bootstrap a fresh application for you. Some prompt options include whether you want to use Typescript, ESLint, or Tailwind CSS styling. Next.js typically ships these configurations by default unless specified otherwise.

Aside from a few minor additions, the starter code for the Globoticket application in this lab has already been generated for you through create-next-app so you won't need to. It also has the aforementioned Typescript, ESLint, and Tailwind CSS configurations enabled.

Formats

Next.js applications typically have two formats that dictate their file structures and naming conventions. The two formats are the Pages router and the App router. The App router is the newer format and is the default format employed when creating new Next.js applications. The Pages format is the older Next.js format and is typically only seen in older applications, but it is still supported for backwards compatibility. The Globoticket application you will be working on is in the App router format.

Overview

Take a look at the filetree. Most of these top-level files are just configuration files and everything here is bootstrapped by default when running the create-next-app command. The public folder typically containing non-sensitive assets such as images and icons. All of your source code is contained within the app directory.

Open the app directory to see all the current files for the Globoticket application. Again, everything here is generated by default with the exception of the lib and components folders, which has been given to you for this lab. The lib folder contains utility functions, the JSON "database" files, and backend logic for you to use. The components folder is currently empty, but you will be creating the necessary React components for Globoticket during this step.

NavBar

In the components folder, create 3 new files called navBar.tsx, itemList.tsx, and deleteItemForm.tsx. These files utilize the tsx file format instead of jsx since this project uses Typescript. Nonetheless, it functions mostly the same as the JSX syntax supported by React.

Link and Image are built-in Next.js components. Link extends the HTML a tag and is the primary method for navigation, while Image extends the HTML img tag and provides automatic optimizations. With these imported, now it's time to design the NavBar component.

This completes the NavBar component and when loaded, it will display the Globoticket logo on the far left and a button labelled Add Item on the far right. Clicking the logo will redirect you back to the home page. Clicking Add Item will currently redirect you to an error page, but in a later step you will add the functionality to redirect to another page that allows for you to create a new item.

DeleteButton

Now navigate to deleteItemForm.tsx.

The first instruction had you bind the deleteItem() function you imported to a variable. This is necessary because the component needs to send data, the id, to the server(deleteItem), so the component must bind id to the deleteItem function.

With this, you now have a DeleteButton component that receives an id. When clicked, it will send this id to the server to perform the logic for item deletion using the provided id.

ItemList

Lastly, you will need to implement the ItemList component within itemList.tsx. This is the component that will display all the items in the database.

import Link from "next/link";
import DeleteButton from "@/app/components/deleteItemForm";
import { Item } from "@/app/lib/util";

The DeleteButton is the component you just built while Item is a custom type that has been given to you to represent the items in the database. . As you may notice, this time the props received is an array of Item, a type that you just imported. Now let's implement ItemList.

        }
    </>
)

* Within the curly braces, use the JavaScript `map()` function on the `jsonData` variable. It should look something like `jsonData.map((item) => ( html element ));`
* For your html element, create a `div` that has a `key` prop set to `item.id` and a `className` of `"p-4 my-5 border border-x-0 border-t-0 border-teal-400 flex justify-between items-center"`
* Within this `div`, create 2 more `div` elements. 
* The first `div` should contain a `h2` header with a `className` of `"font-bold text-2xl"` and displays `item.title`. The `div` should also include a `p` element that displays `item.description`
* The second `div` should have a `className` of `"flex gap-3"` and contain 2 elements: a `DeleteButton` and a `Link`. The `DeleteButton` should have an `id` prop of `item.id`.
* The `Link` element should have an `href` of `` `/editItem/${item.id}` ``. It should also contain a `p` element with a `className` of `"p-2 font-bold bg-blue-500 hover:bg-blue-300"` containing the text `Edit`.
</details>
	
The usage of the fragments is necessary because React component can only return a "single" element. Since the `map()` function would generate a number of sibling elements, you need to enclose them within that `<> </>` fragment, otherwise you would get an error. This wasn't an issue in other components like `NavBar` or `DeleteButton` since all the sub-elements were already enclosed in a single element.
	
When this component is loaded, you will be able to see a list of all the items in the database along with a button to delete or edit each item. 

Overview

All the necessary components should be finished, but currently you cannot see them in action yet. This has to do with how Next.js handles pages and layouts.

A page is the display/UI that users see when interacting with your web application and is always defined in a file called page. Extensions for this file may vary, such as page.tsx, page.ts, page.jsx, or page.js depending on the language you are working in. What users see and interact with in your web application is almost always defined in the current page file that is loaded.

A layout is a step above a page and typically just contains designs/components/assets that you would like to be present across multiple pages. A simple, though not entirely perfect, analogy would be like comparing it to a picture frame while the currently loaded page would be the picture held in the frame. Like pages, layouts are contained in layout files with the same file extension as the page.

Functionally speaking, the code in these files is no different from how you would implement a normal React component. It's just Next.js convention to load the component in these specific files for display.

Home Page

Take a look at the app directory in the filetree. There is a page.tsx and a layout.tsx file, which is always generated by default. This page.tsx represents your home page, while the layout is the root layout that dictates the structure of the web application.

The ItemList is the component you should have just implemented that displays all the items in the database. getData() is a helper function provided to you that asynchronously retrieves the data from the database, aka the mockData.json file in the lib directory.

With this, when your homepage is loaded it will retrieve the items in the database and provide them to the ItemList component to be displayed on the screen.

Root Layout

Move to layout.tsx. Import your NavBar component at the top with import NavBar from "@/app/components/navBar"; and define it where the commented line is.

With this completed, whenever you run your Globoticket application you should see a home page displaying all the items currently in the database. The image logo and Add Item button at the top are from your NavBar component while the list of items is from ItemList.

At this time, clicking the Delete button will properly delete items from the list, but clicking Add Item or Edit will do nothing. This is because the routes that these elements link to have not been setup yet, but you will rectify that in the next step.

Overview

As mentioned in the previous step, a Next.js application can have multiple different pages for display to the user. To navigate between these pages, you need to employ routes. In Next.js, routes are defined as folders in the app directory that contain their own page files. Optionally, they can also contain their own layout files, their own set of utility files/folders, and even other routes(which are called nested). However, only the content within a routes page file will be accessible to the user.

Accessing a route involves adding the route folder name to the URL segment. For example if you had two route folders titled exampleFirst and exampleSecond with their own page files, you would access them at example.com/exampleFirst or example.com/exampleSecond.

The default app folder is a route. It's own page file represents the home page at with the '/' segment(ie. example.com/), but it is special in that it is the only route that requires a layout file for the application to function. This is because the layout in the app directory is responsible for the structure of the entire application, which is why it's called a root layout.

Add Item

Let's get started with implementing the route to add a new item. If you recall in your NavBar component, there was a Link element that routes to '/addItem'. In order to setup this route, create a new folder called addItem in the app directory. Inside this folder, create a page.tsx file. Now you can implement the component for adding an item.

Notice that you didn't need to bind createItem to anything here whereas you had to bind deleteItem in the deleteItemForm.tsx file. This is because the AddItem() component is not sending any additional data to the server besides the data from the form itself, whereas the DeleteButton component was sending additional data(the id it received as a parameter) to the server besides the form data.

After completing this component, clicking the Add Item button on the NavBar component in your application will redirect to another page that allows you add a new item to the database.

Edit Item

Lastly, you will need to implement the route for editing items. In your ItemList component, each Item has a Link element that navigates to /editItem/${item.id}. The problem is that the last segment of this URL path is an id, which means that this value will be different depending on the item you click. To handle this, you will need a dynamic route because you do not know the exact route ahead of time; the route needs to adjust its content depending on the id parameter that is provided.

To set this dynamic route up, create another folder in the app directory called editItem. Inside this editItem folder, create another folder called [id]. Your page.tsx file should go inside this [id] folder. In Next.js, enclosing the name of the parameter in square brackets is the naming convention for dynamic routes. Now that the route is setup, it's time to implement the page file.

The EditItem() component you have defined has the async keyword because the database variable uses await for the asynchronous function getData(). You have an id variable because the id parameter the route receives from the params object is a string, but since the id should be a number you cast it to a number using Typescripts Number() function. Defining the database variable as an Item[] is necessary because the callback function for findIndex() needs to know that each element is an Item type and thus contains an id field for comparison.

The findIndex() method returns -1 if no item is found that meets the specified criteria, which is why you want the redirect('/') to take you back to the home page if that's the case. Otherwise, you want to retrieve the specified item to display its current values. Since you need to send additional data(the index of the item) to the server besides just the form data, updateItem needs to be bound to index similar to how you bound deleteItem in your deleteItemForm.tsx.

Lastly, you need to create the Form element to be displayed on the page.

Try it out

If you've completed all the implementations from these steps, your Globoticket application should be done. Run the application and you should see a list of items with their names and descriptions along with buttons to delete or edit each item. Clicking the Add Item or Edit buttons should redirect you to a different page to add or edit an existing item, while deleting items will delete them from the database and update the page accordingly. You can click the Globoticket image logo to return to the home page at any time.