Building Your First Web Application with React and Next.js

Building Your First Web Application with React and Next.js

React is a popular JavaScript library for building user interfaces, and Next.js is a React framework that provides server-side rendering and other advanced features. In this tutorial, we'll create a simple web application using React and Next.js to understand the basics of these powerful tools.

Setting Up the Development Environment

Before we start, make sure you have Node.js installed on your system. Next.js requires Node.js 10.13 or later. You can download it from the official Node.js website.

# Check your Node.js version
  node -v

Once Node.js is installed, we can create a new Next.js application using the create-next-app CLI tool.

# Create a new Next.js application
  npx create-next-app my-next-app
  
  # Navigate to the project directory
  cd my-next-app
  
  # Start the development server
  npm run dev

Your new Next.js application will be running on http://localhost:3000.

Creating a New Page

Next.js has a file-system based routing system. To create a new page, simply add a new file under the `pages` directory.

// pages/about.js
  export default function About() {
    return (
      <div>
        <h1>About Us</h1>
        <p>This is the about page of our Next.js application.</p>
      </div>
    );
  }

Now, if you navigate to http://localhost:3000/about, you'll see your new 'About Us' page.

Adding Styles

Next.js supports CSS Modules out of the box, which allows you to write CSS in a modular way. Let's add some styles to our 'About' page.

/* styles/About.module.css */
.container {
  padding: 2rem;
  text-align: center;
}

.title {
  color: #0070f3;
  margin-bottom: 0.5rem;
}

// pages/about.js
import styles from '../styles/About.module.css';

export default function About() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>About Us</h1>
      <p>This is the about page of our Next.js application.</p>
    </div>
  );
}

Now, the 'About' page will have styled text and padding, demonstrating how to use CSS Modules in Next.js.

Fetching Data

Next.js provides several data fetching methods. Here, we'll use getStaticProps to fetch data at build time. We'll start with static fake data to mimic an API response, and then we'll show how you might fetch real data from an API.

// Simulating fetching data from an API with static fake data
export async function getStaticProps() {
  const data = {
    users: [
      { id: 1, name: 'Alice', role: 'Developer' },
      { id: 2, name: 'Bob', role: 'Designer' },
      { id: 3, name: 'Charlie', role: 'Manager' }
    ]
  };

  // Pass data to the page via props
  return { props: { data } };
}

// Fetching real data from an API endpoint
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/users');
  const data = await res.json();

  // Pass data to the page via props
  return { props: { data } };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>Welcome to Our Website</h1>
      <h2>Our Team</h2>
      <ul>
        {data.users.map(user => (
          <li key={user.id}>
            {user.name} - {user.role}
          </li>
        ))}
      </ul>
    </div>
  );
}

In the first code snippet, we simulate fetching data with static fake data. In the second snippet, we demonstrate how to fetch real data from an API endpoint using getServerSideProps, which fetches data on each request.

Note that in a real application, you would use either getStaticProps or getServerSideProps, depending on your data fetching needs.

Deploying Your Application

Once your application is ready, you can deploy it to a hosting provider. Vercel, the creators of Next.js, offers a seamless deployment experience for Next.js apps.

# Install the Vercel CLI
npm i -g vercel

# Deploy your application
vercel

Follow the prompts to set up your project on Vercel. Once deployed, your application will be live on the web!

Conclusion

Congratulations on building your first web application with React and Next.js! You've learned how to set up a Next.js project, create pages, add styles, fetch data, and prepare your application for deployment. These are the foundational skills you need to start building more complex applications. Keep experimenting and learning, and you'll continue to grow as a React developer.