Next.js – Initialization

Next.js

Initialization

Setting up a new Next.js project with App Router, TypeScript, and Tailwind CSS.

Create Project: Command to bootstrap a new Next.js project.

📄terminal
BASH

npx create-next-app@latest my-next-app
# Prompts:
# ✔ Would you like to use TypeScript? … Yes
# ✔ Would you like to use ESLint? … Yes
# ✔ Would you like to use Tailwind CSS? … Yes
# ✔ Would you like to use `src/` directory? … No
# ✔ Would you like to use App Router? (recommended) … Yes
# ✔ Would you like to customize the default import alias (@/*)? … No

Project Structure: Basic structure of the app directory.

📄app/layout.tsx
TSX

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'My Next.js App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Basic Page: A simple page component in Next.js App Router.

📄app/page.tsx
TSX

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-4xl font-bold">
        Welcome to Next.js
      </h1>
      <p className="mt-4 text-xl">
        Get started by editing <code>app/page.tsx</code>
      </p>
    </main>
  )
}