Part 30: Building a Hybrid Shop Website with Next.js

[Pages] Next Shop: Setup

[Pages] Next Shop: Setup

In this part of our course, we'll embark on building a more sophisticated application using Next.js. Our project will be an online shop specializing in indoor plants. This shop will utilize both static pages and server-side rendering (SSR), making it a hybrid application. Let's dive into the features and setup of this exciting project.

Application Features

Key Functionalities

  • Product Grid: Showcase a collection of products with images.

  • Product Details: Provide detailed information on selected items.

  • User Authentication: Allow users to sign in and manage their shopping carts.

  • Shopping Cart: Enable users to add products to their cart and view order summaries.

Project Setup

1. Creating a New Next.js Project

We'll initiate our project using the Create Next App tool, which simplifies the setup process by providing a ready-to-use project structure.

npx create-next-app next-shop

This command will generate a new folder named next-shop, which contains all the essential files and dependencies to kickstart our project. Let's open this folder in our code editor, such as Visual Studio Code.

2. Exploring the Initial Project Structure

Upon opening the project, you'll notice several key files and directories:

  • package.json: Lists dependencies like next and react, along with scripts for development, building, and starting the project. It also includes eslint in the devDependencies for code quality checks.

  • pages Directory: Contains the index.js file for the home page and _app.js for custom app configuration. There's also an api folder initially, which we can remove for now as we'll cover API routes later.

  • styles Directory: Includes a globals.css file for global styles and Home.module.css for component-specific styles using CSS modules.

  • public Directory: Contains default images like favicon and a logo, which we can replace with our own assets later.

  • Configuration Files: Includes .gitignore for version control exclusions and next.config.js for Next.js-specific settings.

3. Cleaning Up the Initial Setup

Before we start building our shop, let's tidy up the initial setup:

  • Remove unnecessary files such as the vercel.svg and Home.module.css.

  • Simplify the index.js file by deleting the boilerplate JSX and adding our custom home page content.

Here's a simplified version of our index.js:

// next-shop/pages/index.js
import Head from 'next/head';

function HomePage() {
  return (
    <>
      <Head>
        <title>Next Shop</title>
      </Head>
      <main>
        <h1>Next Shop</h1>
      </main>
    </>
  );
}

export default HomePage;

4. Running the Application

To see our basic setup in action, run the development server:

npm run dev

Open the provided URL in a web browser, and you'll see our minimalist home page with the title "Next Shop."

List of Deleted Files

During the cleanup, we removed the following files:

  1. pages/api/hello.js: An initial API route example.

  2. public/vercel.svg: A default logo image.

  3. styles/Home.module.css: Styles specific to the initial home page.

  4. public/next.svg: Another default image.

  5. pages/_document.js: An optional file for customizing the document structure.

  6. jsconfig.json: A configuration file that was not necessary for our current setup.

Conclusion

With our project set up and unnecessary files removed, we're ready to start building our shop's functionality. In the next steps, we'll incorporate advanced Next.js features like static site generation, server-side rendering, and more. This journey will enhance your skills in creating robust and dynamic web applications. Stay tuned as we continue to develop our online plant shop!

PreviousPart 29: Understanding Local Storage and Hydration in Next.jsNextPart 31: Styling Your Next.js Project with Tailwind CSS

Last updated