How to Set Up a Next.js Project with TypeScript

Introduction:

Welcome to Next.js project creation, a strong framework based on React for creating full-stack applications. With Next.js, you gain improved designs, server-side rendering, and a file-based routing system to work on the development of present day web applications.

System Requirements:

To get started with Next.js, ensure you have:
Node.js v22 or later
macOS, Windows (including WSL), or Linux

Automatic Installation

To quickly start a new Next.js project with recommended settings, use create-next-app. It works on the arrangement cycle by dealing with setups for TypeScript, ESLint, Tailwind CSS, and that’s just the beginning.

Steps to Create a New Project

Run the following command in your terminal:

npx create-next-app@latest

During installation, you’ll be prompted to configure project settings:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes

After the prompts, create-next-app will create a folder with your project name and install every necessary reliance.

Tip: By default, Next.js includes TypeScript, ESLint, and Tailwind CSS setup. You can also choose to use a src/ directory for better project organization.

Manual Installation

If you’d prefer manual setup, you can install Next.js, React, and React DOM as follows:

Install Dependencies:

npm install next@latest react@latest react-dom@latest

Add Scripts to package.json:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Each script is essential for different stages of development:

dev: Starts the development server.
build: Builds the application for production.
start: Starts the application in production mode.
lint: Sets up ESLint for code quality checks.

Creating the Directory Structure

Next.js offers two main routing options: the App Router and the Pages Router. The directory structure depends on which router you use.

The App Router (Recommended)

Create the app Directory: In the root folder of your project, create an app directory.

Add layout.tsx and page.tsx Files: These will serve as the layout and main page for your app.

app/layout.tsx

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

app/page.tsx

export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

Note: If you forget to create layout.tsx, Next.js will automatically generate it when running the development server.

The Pages Router (Optional)

If you prefer the Pages Router:

Create a pages Directory: This is the default directory for routing in older versions of Next.js.

Create index.tsx: This file will be the main page of your app.

pages/index.tsx

export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

Create a Custom Layout and Document (Optional):

pages/_app.tsx: Used to define a global layout.

import type { AppProps } from ‘next/app’;

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

pages/_document.tsx: Used to customize the initial HTML document.

import { Html, Head, Main, NextScript } from ‘next/document’;

export default function Document() {   return (
<html>
  <head />
  <body>
    <main />
    <NextScript />
  </body>
</html>
  ); }

Tip: You can use both routers within the same project, but app routes will be prioritized over pages routes. For clarity, consider using only one router per project.

Adding Static Assets
You can add images, fonts, and other static files in a public folder at the root of your project. Any file placed here is accessible in your app with the base URL (/).

Running the Development Server
To start your project in development mode, run:

npm run dev

Visit http://localhost:3000 to view your app. Make edits to app/page.tsx (or pages/index.tsx) and save to see updates reflected immediately.

Summary
You’ve successfully set up a Next.js project with TypeScript and configured your project structure. You can now take advantage of Next.js features like server-side rendering, file-based routing, and seamless TypeScript integration. Happy coding!

SeeB4Coding