Project Initialization and Available Starters

In Quantum Metropolis, engineers often use predefined quantum schematics to accelerate the development of new city systems. Similarly, in the Next.js world, we can use various starter templates and configurations that allow us to start working on a new application more quickly. In this module, we will explore the available starters for Next.js 15 and learn how to effectively initialize new projects.

Basic Project Initialization

As we already know from the previous module, the simplest way to start a new Next.js project is to use the

create-next-app

tool:

1npx create-next-app@latest my-quantum-project

This command creates a new Next.js project with default configuration. It is like launching a basic residential module in Quantum Metropolis - functional, but you may want to customize it to your specific needs.

Configuration Options for create-next-app

When creating a new project,

create-next-app

will ask about several configuration options. Let's take a closer look at them:

1Would you like to use TypeScript? Yes
2Would you like to use ESLint? Yes
3Would you like to use Tailwind CSS? Yes
4Would you like to use src/ directory? Yes
5Would you like to use App Router? (recommended) Yes
6Would you like to customize the default import alias (@/*)? No

TypeScript

TypeScript adds static typing to JavaScript, helping catch errors while writing code. In Quantum Metropolis, this would be similar to early warning systems that detect problems before they become critical.

1// JavaScript
2function addEnergy(reactor, amount) {
3  return reactor.level + amount;
4}
5
6// TypeScript
7interface Reactor {
8  level: number;
9  maxCapacity: number;
10  status: 'active' | 'inactive' | 'maintenance';
11}
12
13function addEnergy(reactor: Reactor, amount: number): number {
14  if (reactor.status !== 'active') {
15    throw new Error('Reactor must be active to add energy');
16  }
17  return reactor.level + amount;
18}

ESLint

ESLint is a static code analysis tool that helps maintain consistent style and detect potential issues. It is like an automatic quality controller in Quantum Metropolis factories.

Tailwind CSS

Tailwind CSS is a CSS framework based on utility classes. Instead of writing your own CSS styles, you use predefined classes directly in HTML. It is like the modular construction system in Quantum Metropolis - instead of designing each building from scratch, engineers combine ready-made modules.

1// Without Tailwind
2<button className="login-button">Log in</button>
3
4// With Tailwind
5<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
6  Log in
7</button>

The src/ Directory

Using the

src/

directory is a good organizational practice that separates source code from configuration files. It is like separating the management center from the infrastructure in Quantum Metropolis.

App Router

The App Router is a modern routing approach in Next.js, based on React Server Components. It is a key feature of Next.js 15, which we definitely recommend using in new projects.

Import Alias @/*

The import alias

@/*

allows you to use a shorthand path for importing modules from the project root. It is like the rapid transit system in Quantum Metropolis - a shortcut that saves time.

1// Without alias
2import { Button } from '../../../components/ui/Button';
3
4// With alias @/*
5import { Button } from '@/components/ui/Button';

Official Starter Templates

Next.js offers several official starter templates that you can use as the foundation for your project. To use them, use the

--example

flag:

1npx create-next-app@latest my-quantum-dashboard --example with-tailwindcss

Here are some of the most popular official templates:

1. with-tailwindcss

A template with Tailwind CSS pre-installed and configured.

1npx create-next-app@latest --example with-tailwindcss my-tailwind-app

2. with-typescript

A template with TypeScript already configured.

1npx create-next-app@latest --example with-typescript my-ts-app

3. blog-starter

A Markdown blog template, ready to use.

1npx create-next-app@latest --example blog-starter my-blog

4. commerce

A full e-commerce template that you can customize to your needs.

1npx create-next-app@latest --example commerce my-store

Next.js Templates - Advanced Starters

Vercel, the company behind Next.js, also offers more advanced templates at vercel.com/templates. These are ready-made projects for specific use cases. This resembles how Quantum Metropolis architects can choose ready-made plans for different types of city structures.

Some noteworthy templates:

Next.js AI Chatbot

A full AI chatbot using OpenAI, similar to ChatGPT.

1npx create-next-app@latest ai-chatbot \
2  --use-pnpm \
3  --example "https://github.com/vercel/ai/tree/main/examples/next-ai-chatbot"

Next.js Dashboard

A comprehensive dashboard with an admin panel, authentication, and database.

1npx create-next-app@latest dashboard \
2  --use-pnpm \
3  --example "https://github.com/vercel/next.js/tree/canary/examples/with-supabase"

Community Starters

In addition to official templates, the Next.js community has created many of their own starters. These are like experimental architectural projects in Quantum Metropolis - not part of the official infrastructure, but they can offer innovative solutions.

T3 Stack

T3 Stack is a popular toolkit for building Next.js applications with TypeScript, tRPC, Tailwind CSS, and Prisma.

1npm create t3-app@latest

Next.js Nextra

Nextra is a framework for creating static sites and documentation based on Next.js.

1npx create-next-app@latest my-docs-site \
2  --use-pnpm \
3  --example "https://github.com/shuding/nextra-docs-template"

Project Structure After Initialization

After initializing a Next.js 15 project with App Router, you will see the following file structure:

1my-quantum-project/
2├── app/                 # App Router directory
3│   ├── favicon.ico      # Page icon
4│   ├── globals.css      # Global CSS styles
5│   ├── layout.tsx       # Main application layout
6│   └── page.tsx         # Home page
7├── public/              # Static files
8│   └── next.svg         # Next.js logo
9├── .eslintrc.json       # ESLint configuration
10├── next.config.js       # Next.js configuration
11├── package.json         # Dependencies and scripts
12├── postcss.config.js    # PostCSS configuration
13├── tailwind.config.ts   # Tailwind configuration
14└── tsconfig.json        # TypeScript configuration

Let's take a closer look at some of these files:

app/page.tsx

This is the main page of your application, accessible at

/

.

1export default function Home() {
2  return (
3    <main className="flex min-h-screen flex-col items-center justify-between p-24">
4      <h1 className="text-4xl font-bold">Welcome to Quantum Metropolis</h1>
5      <p className="text-xl">The future starts here.</p>
6    </main>
7  );
8}

app/layout.tsx

This file defines the layout that will be shared across all pages in your application.

1import './globals.css';
2import type { Metadata } from 'next';
3
4export const metadata: Metadata = {
5  title: 'Quantum Metropolis',
6  description: 'Management portal for the city of the future systems',
7};
8
9export default function RootLayout({
10  children,
11}: {
12  children: React.ReactNode;
13}) {
14  return (
15    <html lang="en">
16      <body>{children}</body>
17    </html>
18  );
19}

next.config.js

This file contains the Next.js configuration. You can extend it with your own settings.

1/** @type {import('next').NextConfig} */
2const nextConfig = {
3  // Your configurations
4  images: {
5    domains: ['quantum-metropolis.example.com'],
6  },
7};
8
9module.exports = nextConfig;

Modifying an Existing Project

After initializing a project, you will usually want to customize it to your needs. Here are some typical changes:

1. Updating Metadata

Update the

app/layout.tsx

file to change the application title and description:

1export const metadata: Metadata = {
2  title: 'Quantum Metropolis Management System',
3  description: 'Advanced interface for monitoring and controlling city systems',
4};

2. Adding Dependencies

Install additional libraries you need:

1npm install axios react-query zustand

3. Configuring Folder Structure

Create folders for typical application elements:

1mkdir -p src/app/components/ui
2mkdir -p src/app/lib
3mkdir -p src/app/hooks
4mkdir -p src/app/utils

4. Customizing Styles

If you are using Tailwind CSS, you can customize its configuration in the

tailwind.config.ts

file:

1import type { Config } from 'tailwindcss';
2
3const config: Config = {
4  content: [
5    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
6    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
7    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
8  ],
9  theme: {
10    extend: {
11      colors: {
12        quantum: {
13          primary: '#3B82F6',
14          secondary: '#10B981',
15          accent: '#8B5CF6',
16          dark: '#1F2937',
17        },
18      },
19      fontFamily: {
20        sans: ['Inter', 'sans-serif'],
21        mono: ['Fira Code', 'monospace'],
22      },
23    },
24  },
25  plugins: [],
26};
27export default config;

Git and .gitignore Configuration

When you initialize a project using

create-next-app

, git will be automatically initialized and a

.gitignore

file will be created. This is like the plan control and archiving system in Quantum Metropolis - it allows you to track changes and collaborate with other engineers.

You can add your first commit to the repository:

1git add .
2git commit -m "Initialize Next.js 15 project"

Customizing npm Scripts

You can customize scripts in the

package.json

file to simplify frequently performed tasks:

1"scripts": {
2  "dev": "next dev",
3  "build": "next build",
4  "start": "next start",
5  "lint": "next lint",
6  "format": "prettier --write \"**/*.{js,ts,tsx,md}\"",
7  "update-deps": "npm update"
8}

Summary

Initializing a Next.js 15 project and choosing the right starter is the foundation for your application's success, just as solid foundations are key for every building in Quantum Metropolis. In this module, we explored various project initialization options, from basic

create-next-app

to advanced community templates.

Choosing the right starter depends on your specific needs. For simpler projects, the default

create-next-app

template may be sufficient. For more complex applications, consider using one of the official templates or community solutions.

Remember that a well-organized project start will save you a lot of time and problems in the future, just as careful planning of city infrastructure in Quantum Metropolis prevents problems with its expansion.

In the next module, we will delve into the directory and file structure in Next.js, comparing the new App Router with the traditional Pages Router.