Invoices Page

Congratulations! We've covered all the fundamental Next.js concepts. You're now equipped to build various types of apps using Next.js.

Moving forward, we'll delve into advanced concepts that are optional for some apps or projects. However, gaining knowledge of these concepts can be highly beneficial.

Back to the Project

Let's shift our focus to the Invoices page and proceed with its development.

Please copy and paste the following code into app/dashboard/invoices/page.tsx. Take some time to inspect and understand the purpose of this code.

The application has three key features:

• Search lets users look for specific invoices;
• Pagination allows them to navigate between pages of invoices;
• Table shows all the invoices available.

We will use URL search parameters to handle the search state, which might be new if you're accustomed to using a client-side state.

Benefits include:

• Users can bookmark or share the current application state, including search queries and filters, as the parameters are part of the URL;
• URL parameters facilitate server-side rendering, directly simplifying the initial state setup on the server;
• With search details in the URL, tracking user behavior becomes easier, requiring less client-side logic.

Let's proceed with this idea in the upcoming chapter.

In Practice