Building the login form

Let’s start building the Login page for our ticket system. To keep pages clean and readable, let’s create a component in a new file named app/Login.js.

Reminder

app/Login.js is not a page but a component! In the Pages Router, every file within the pages/ directory was a page. In the App Router, pages are always named page.js, and their routed path is defined by the directory they are in. This allows you to create non-page files (such as component files) co-located with the actual page files.

In this component file, we will start by defining the Login component skeleton, like so:

export const Login = () => {
  return (
    <form>
      <article style={{ maxWidth: "420px", margin: "auto" }}>
        <header>Login</header>
        <strong>Hello Login...