Setting Up Our First Next.js App Using TypeScript

If you’re interested in building fast, modern websites using React, Next.js is a great place to begin. It is a framework built on top of React that simplifies routing, improves performance, and helps us create both static and dynamic web applications easily. Many developers use Next.js to build blogs, dashboards, e-commerce sites, and full-stack applications because it takes care of a lot of complexity behind the scenes.

---

🧩 Prerequisites

Before you begin, you may want to go through the following posts to get the most out of this tutorial:

• 👉 Getting Started with Node.js: Setup and Hello World — to install and understand Node.js, which React depends on.
• 👉 What makes Next.js different from plain React — to understand differences between Next.js and React.

---

Step 1: Create a New Next.js App

Open the terminal and run:

npx create-next-app@latest nextjs-starter-01-rec-defaults

We can select the recommended defaults when prompted

We can see that the recommended dependencies and dev dependencies are installed.

Then navigate into our new project directory:

cd nextjs-starter-01-rec-defaults

---

Step 2: Run the Development Server

Start your app by running:

npm run dev

Open your browser and visit:

http://localhost:3000

We’ll see a basic starter page—our project is now running locally.

---

Step 3: Understanding the Project Structure

Folders

• app/ – Contains your pages, layouts, and routing structure using the App Router.
• public/ – Stores static files such as images and icons that can be accessed directly from the browser.
• .next/ – Auto-generated build output; contains compiled pages, caches, and server-side code.
• node_modules/ – Stores all installed libraries and packages; generated automatically by npm.

---

Files

• .gitignore – Specifies which files and folders Git should ignore (e.g., .next/, node_modules/).
• eslint.config.mjs – Holds configuration for ESLint, a tool that checks code quality and helps avoid errors.
• next.config.js / next.config.mjs – Lets you customize how Next.js behaves, such as routing, images, and build settings.
• next-env.d.ts – Ensures TypeScript understands Next.js types; generated automatically and not edited manually.
• package.json – Defines your project’s metadata, dependencies, and scripts like dev, build, and start.
• package-lock.json – Locks exact dependency versions so your project installs consistently across environments.
• postcss.config.mjs – Configuration file for PostCSS, which helps process and optimize your CSS.
• README.md – Basic documentation explaining how to run and work with the project.
• tsconfig.json – TypeScript configuration file that controls strictness, paths, and compiler options.

---

Step 4: Create Our First Page

Inside the app/ folder, create a new folder named about, and inside it create a file named page.tsx:

app/about/page.tsx

Add the following code:

function About() {
  return (
    <div>
      <h1>About US</h1>
      <p>Welcome to SecDops!</p>
    </div>
  );
}

export default About;

Now visit this URL in your browser:

http://localhost:3000/about

You should see the new page created using TypeScript.

---

Step 5: Modify the Home Page

Open the file:

app/page.tsx

Replace its content with:

function Home() {
  return (
    <div>
      <h1>Welcome to SecDops!</h1>
      <p>This is your homepage. You can now start customizing it.</p>
    </div>
  );
}

export default Home;

Save the file and your browser will update automatically.

---

Step 6: Build Your App for Production

When we’re ready to prepare our site for deployment:

npm run build
npm start

This generates an optimized version of our project and run it.

---

Final Thoughts

We’ve now created our very first Next.js application and learned how to run, edit, and build it. As our next step, we can explore adding styles, creating dynamic routes, working with server components, or deploying to platforms like Vercel.

---

📚 References (Full URLs)

https://nextjs.org/blog/next-15
https://blog.logrocket.com/next-js-16-whats-new/
https://sprints.ai/blog/what-are-the-features-of-the-latest-version-of-next-js
https://reliasoftware.com/blog/nextjs-15-new-features
https://plainenglish.io/blog/next-js-15-release-whats-new-and-updated
https://nextjs.org/blog/next-15-4

---

🎁 Bonus: What Is Vercel and Why Should You Use It?

When you are ready to publish your Next.js application, Vercel is one of the best platforms to deploy it. Vercel was founded by Guillermo Rauch, who is also the creator of Next.js, which means both tools work together smoothly.

🚀 What Vercel Does

• Hosts your Next.js app on the internet
• Automatically builds and updates your project
• Serves your site from a global network for fast loading
• Lets you add your own custom domain
• Gives you serverless functions for backend logic

✨ Why Developers Love Vercel

• Super easy deployment — often just one click
• Excellent free tier for learning and personal projects
• Works perfectly with GitHub and GitLab
• No servers to manage, configure, or secure
• Built-in optimizations for images, routing, and caching

🌐 How Deployment Works

You can either:

1. Connect your GitHub repository to Vercel
   OR
2. Install the Vercel CLI and run:

vercel

That’s it — Vercel handles everything else.

📌 In Simple Words

Vercel is one of the easiest way to put your Next.js website online.
It’s fast, beginner-friendly, and designed by the same team behind Next.js.

---