Getting Started with Your First App

Welcome to the MSDN documentation! This guide will walk you through the essential steps to create and deploy your very first application. We'll focus on a modern web development stack, ensuring you get hands-on experience with industry-standard tools.

Prerequisites

Before you begin, ensure you have the following installed on your system:

Step 1: Project Setup

Initialize Your Project

Open your terminal and navigate to the directory where you want to create your project. Then, run the following command to create a new Next.js application:

npx create-next-app@latest my-first-app

Follow the prompts. For this guide, you can accept the default options or choose your preferred setup.

Navigate to Your Project Directory

Once the installation is complete, change into your new project directory:

cd my-first-app

Step 2: Understanding the Project Structure

Your new project comes with a pre-defined structure. Key directories include:

Step 3: Creating Your First Page

Edit the Homepage

Open the pages/index.js file in your code editor. You'll see some default content. Let's replace it with a simple welcome message.

Find the existing JSX and replace it with the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First App</title>
    <meta name="description" content="My very first application built with Next.js" />
</head>
<body style="font-family: 'Segoe UI', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333;">
    <div style="max-width: 800px; margin: 50px auto; padding: 30px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
        <h1 style="color: #0078d4; text-align: center;">Hello, World!</h1>
        <p style="text-align: center; font-size: 1.1em;">This is my first application! I'm excited to learn and build.</p>
        <div style="text-align: center; margin-top: 30px;">
            <a href="/about" style="color: #005a9e; text-decoration: none; font-weight: bold;">Learn More About Us</a>
        </div>
    </div>
</body>
</html>

Create an About Page

Create a new file named about.js inside the pages/ directory. Add the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>About Us - My First App</title>
    <meta name="description" content="Information about My First App." />
</head>
<body style="font-family: 'Segoe UI', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333;">
    <div style="max-width: 800px; margin: 50px auto; padding: 30px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
        <h1 style="color: #0078d4; text-align: center;">About This App</h1>
        <p style="text-align: center; font-size: 1.1em;">This application was created as a learning exercise using Next.js.</p>
        <div style="text-align: center; margin-top: 30px;">
            <a href="/" style="color: #005a9e; text-decoration: none; font-weight: bold;">Go Back Home</a>
        </div>
    </div>
</body>
</html>

Step 4: Running Your Application

Start the Development Server

In your terminal, run the following command:

npm run dev

This will start a local development server. Open your web browser and navigate to http://localhost:3000. You should see your "Hello, World!" message!

You can now visit http://localhost:3000/about to see your About page.

Next Steps

Congratulations on building your first application! Here are some ideas to continue your learning journey:

Happy coding!