New Project & Folder Structure

1. Setting Up the Next.js Application

a. Prerequisites

Node.js (18+ above) must be installed on your system.
A terminal or command prompt is required.
(Optional) An IDE like Visual Studio Code for editing your code.

b. Create the App with Create Next App

Open your terminal and navigate to the working folder where you want your project. For example:
```
cd ~/Your-working-directory
```

Run the create-next-app command using NPX:

npx create-next-app@latest next-property-shop-app

Explain the interactive prompts:
- Project Name: It should be next-property-shop-app (the folder will be created with this name).
- TypeScript: You can choose No if you prefer JavaScript (as done in the sample).
- ESLint: Choose No to keep default settings (unless you want custom linting).
- Tailwind CSS: Choose Yes if you want to include Tailwind for styling.
- Use Source Directory: Choose No (this means your code will live in the default structure; using a src folder is optional).
- Use App Router: Choose Yes to use the modern file-based routing provided in Next.js 13+.
- Customize the Alias: Choose No for default settings.
Wait for the dependencies to install. The tool will install core dependencies like react, react-dom, next, and, if opted, Tailwind CSS.

2. Running and Opening Your Application

Navigate into your new project directory:
```
cd property-shop-next-app
```
Open the project in your code editor. For example, if using Visual Studio Code:
```
code .
```
Start the development server:
```
npm run dev
```
View your app: Open your browser and go to http://localhost:3000 to see your running Next.js application.

3. Exploring the Optimal Folder Structure

Next.js (especially with the new App Router) uses a file-based routing system that makes organizing your code straightforward. Here’s an overview of the recommended folder structure:

a. Core Directories and Files

app/ Directory:
- Purpose: Contains all route-specific code and layouts.
- Files:
  - layout.js (or layout.tsx): Wraps all your pages. Use this file to add common elements such as headers, footers, or global styles.
  - page.js (or page.tsx): Represents your home page.
  - Additional folders: Create folders inside app/ to represent additional routes (e.g., /about/page.js for the About page).

b. Additional Recommended Folders for Scalability

components/
- Purpose: Contains reusable UI components (e.g., navigation bars, buttons, cards).
- Benefit: Promotes code reusability and separation of concerns.
styles/
- Purpose: Houses global CSS files or Tailwind configuration files.
- Benefit: Centralizes style definitions making it easier to update and maintain design consistency.
public/
- Purpose: Stores static assets like images, fonts, and icons.
- Benefit: These files are served directly, keeping your source code clean.
lib/ or utils/
- Purpose: Contains utility functions, helper modules, or API-related code.
- Benefit: Keeps business logic and reusable functions separate from UI components.
hooks/ (if needed)
- Purpose: For custom React hooks that manage stateful logic.
- Benefit: Encapsulates complex logic into easy-to-use hooks.

c. Hands-On Exercise: Rebuilding the App Folder

The document suggests deleting the auto-generated app folder to rebuild it from scratch. This is an excellent exercise to understand:

File-Based Routing: How each file corresponds to a route.
Layout and Page Separation: How the layout wraps each page.
Modularity: How to keep your project organized as it grows.

Steps for the exercise:

Delete the existing app/ folder from your project.
Create a new app/ folder manually.
Recreate the essential files:
- layout.jsx: Create a simple layout that includes basic HTML structure (e.g., <html>, <body>, header/footer).

// app/layout.jsx

function RootLayout({ children }) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        RootLayout : {children}
      </body>
    </html>
  );
}
export default RootLayout

page.jsx: Build a basic home page.

// app/page.jsx - children

import Image from "next/image";

export default function Home() {
  return (
(omitted)
);
}

NEXT.JS 14 : First create assets folder at root and then create styles flder inside assets folder and add globals.css in styles folder.
include tailwind libraries in globals.css file as bellow:

// assets/styles/globls.css - NEXT.js 14
@tailwind base;
@tailwind components;
@tailwind utilities;

import globals.css file in app/layout.jsx as

// app/layout.jsx
import '@/assets/styles/globals.css';
(omitted)

Test your app by running npm run dev and verifying that the new structure is working.

This manual process reinforces understanding of how Next.js handles routing and layouts, which is key to building scalable and maintainable applications

4. Summary

Create the App: Use NPX to run create-next-app@latest property-shop-next-app and follow the prompts.
Run the Dev Server: Navigate into your project, open it in your editor, and run npm run dev.
Understand the Folder Structure: Focus on the app/ directory for routing and layout, and add additional folders like components/, styles/, public/, lib/, and hooks/ to organize your code.
Hands-On Practice: Rebuild the app/ folder manually to better understand the routing and file structure.

By following these steps and exploring the structure, you'll set a strong foundation for building scalable and maintainable Next.js applications.

PreviousHands on Practice 2 NextFile-Based Routing

Last updated 2 months ago