Part 59: Enhancing Our Next.js Shop: Introducing a Sign-In Page with a Reusable Layout Component

[Pages] Authentication

In today's post, we'll delve into adding authentication functionality to our Next.js shop by creating a sign-in page. While doing so, we'll explore the benefits of using a reusable layout component to maintain a consistent design across our application, reducing code duplication and enhancing maintainability.

Let's start by adding a new file for our sign-in page at the same level as our index page. We'll name this file sign-in.js.

// pages/sign-in.js

import Page from '../components/Page';

function SignInPage() {
  return (
    <Page title="Sign In">
      {/* Additional content will be added here later */}
    </Page>
  );
}

export default SignInPage;

Explanation:

Page Component: We're using a custom Page component to wrap our sign-in content. This component will handle the common layout, such as the header and main sections.
Title Prop: We pass a title prop to the Page component, which is used to set the page's title and heading.

Step 2: Introducing the Page Component

Instead of duplicating layout code across multiple pages, we'll create a Page component that encapsulates the common structure of our pages.

// components/Page.js

import Head from 'next/head';
import Title from './Title';

function Page({ title, children }) {
  return (
    <>
      <Head>
        <title>{`${title} - Next Shop`}</title>
      </Head>
      <main className="px-6 py-4">
        <Title>{title}</Title>
        {children}
      </main>
    </>
  );
}

export default Page;

Explanation:

Head Component: The Head component from Next.js is used to set the HTML document's title dynamically.
Title Component: This displays the page-specific title within the main content area.
Children Prop: React's children prop allows us to pass page-specific content into the Page component.

Step 3: Refactoring Existing Pages

Now that we have our Page component, let's refactor our existing pages to utilize this new component, reducing code duplication.

Home Page Refactor

// pages/index.js

import Page from '../components/Page';
import ProductCard from '../components/ProductCard';
import { getProducts } from '../lib/products';

export async function getStaticProps() {
  const products = await getProducts();
  return { props: { products } };
}

function HomePage({ products }) {
  return (
    <Page title="Indoor Plants">
      <ul className="grid grid-cols-1 lg:grid-cols-3 gap-4">
        {products.map((product) => (
          <li key={product.id}>
            <ProductCard product={product} />
          </li>
        ))}
      </ul>
    </Page>
  );
}

export default HomePage;

Product Page Refactor

// pages/products/[id].js

import Image from 'next/image';
import Page from '../../components/Page';
import { ApiError } from '../../lib/api';
import { getProduct, getProducts } from '../../lib/products';

export async function getStaticPaths() {
  const products = await getProducts();
  const paths = products.map(product => ({
    params: { id: product.id.toString() },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params: { id } }) {
  try {
    const product = await getProduct(id);
    return { props: { product } };
  } catch (err) {
    if (err instanceof ApiError && err.status === 404) {
      return { notFound: true };
    }
    throw err;
  }
}

function ProductPage({ product }) {
  return (
    <Page title={product.title}>
      <div className="flex flex-col lg:flex-row">
        <div>
          <Image src={product.pictureUrl} alt="" width={640} height={480} priority />
        </div>
        <div className="flex-1 lg:ml-4">
          <p className="text-sm">{product.description}</p>
          <p className="text-lg font-bold mt-2">{product.price}</p>
        </div>
      </div>
    </Page>
  );
}

export default ProductPage;

Conclusion

By creating a reusable Page component, we've streamlined our codebase, making it easier to maintain and extend. This approach not only reduces duplication but also ensures a consistent look and feel across our application's pages. In the next steps, we'll continue enhancing our sign-in page by adding form elements and handling authentication requests. Stay tuned for more improvements to our Next.js shop!

PreviousPart 58: Implementing Authentication and Shopping Cart Functionality in Next.js with Strapi NextPart 60: Crafting a User-Friendly Sign-In Page with Tailwind CSS

Last updated 1 year ago

hashtagStep 1: Creating the Sign-In Page

hashtagExplanation:

hashtagStep 2: Introducing the Page Component

hashtagExplanation:

hashtagStep 3: Refactoring Existing Pages

hashtagHome Page Refactor

hashtagProduct Page Refactor

hashtagConclusion

Step 1: Creating the Sign-In Page

Explanation:

Step 2: Introducing the Page Component

Explanation:

Step 3: Refactoring Existing Pages

Home Page Refactor

Product Page Refactor

Conclusion