Understanding Nextjs Folder Structure

In this lesson, we'll delve into the intricacies of the folder structure generated by Next.js. By comprehensively exploring these directories and their specific functions, you'll gain a deeper understanding of how Next.js operates, which is crucial for effectively following and comprehending the course.

Before diving into our first design with Tailwind CSS, let's explore the basics of Next.js project structure. Understanding this structure is crucial for creating pages and components.

Understanding Folder Structure

Next.js features a default routing engine that navigates based on folder structure. In VSCode, you'll notice an 'app' folder containing a 'page.tsx' file. This file renders the HTML we see at 'http://localhost:3000/'.
To create a nested page like "products" (accessible at 'http://localhost:3000/products'), simply create a 'products' folder under 'app' and add a new 'page.tsx' file there.

Ensure that your Next.js project is running in the terminal window. If it's not, start it by executing the following command from within the project folder.npm run dev

Understanding Layouts

Next.js uses layouts to share code across pages. The 'layout.tsx' file in the 'app' directory typically includes standard HTML and body tags. While multiple layouts can be created, we'll focus on this default layout in this course.
The {children} tag in 'layout.tsx' instructs Next.js to insert the content of the respective 'page.tsx' file at that location. Therefore, when we navigate to http://localhost:3000, Next.js renders both 'layout.tsx' and the content from the corresponding 'page.tsx' file."

Code Cleanup

We will begin by cleaning up the default code that the Next.js CLI generated during the project's installation. This step ensures that we start from the basics.

1. Open the 'global.css' file located in the app directory. Ensure it contains only the following code, removing any other existing code.

Code block

@tailwind base;
@tailwind components;
@tailwind utilities;

2. Next, open the 'page.tsx' file in the app directory. This file should only contain the following code; remove any additional code

Code block

export default function Home() {
  return (
    <main>
      <div>
        Welcome to XPChannel
      </div>
    </main>
  )
}

3. Open your browser and visit 'http://localhost:3000/' to see the following output.

Next lesson - Preflight

In this lesson, we will explore Tailwind CSS's foundational layer of styles, known as 'Preflight'. Preflight is integral to Tailwind, as it applies a set of base styles aimed at standardizing the appearance of elements across different browsers. We'll examine how these preflight styles reset browser defaults and lay a consistent foundation for your designs, ensuring that your styling remains uniform and predictable across various web environments.

All Modules