Creating a shared UI layout with navigation elements
Our Login page is the root page of our application, as shown when you visit http://localhost:3000/ when running the development server with npm run dev. Later, when logged in, the entry page for the management of the tickets shall be reachable at http://your-domain/tickets.
Due to the file-based routing in Next.js, we will put all files related to ticket management below the app/tickets/ directory, so all routes related to ticket management will start with /tickets. At /tickets, we will have the dashboard (Ticket List); at /tickets/new, it should be possible to create a new ticket, and so on. Everything related to ticket management will be at http://your-domain/tickets/*, explained in one wildcard URL. This not only makes sense semantically and structurally but also allows us to easily protect everything that sits within /tickets in the next chapter.
To get started, create the app/tickets directory. Then, we want to create...
