Getting Started with Next.js: Building a Server-rendered React App

Getting Started with Next.js: Building a Server-rendered React App

1. Introduction

Next.js is a powerful and popular framework for building server-rendered React applications. It offers a streamlined development experience, built-in optimizations, and simple deployment solutions. In this tutorial, we'll walk you through the process of setting up a Next.js project, creating pages and components, handling data fetching, and deploying your app.

2. Setting Up a Next.js Project

To get started with Next.js, you'll need to have Node.js and npm (Node Package Manager) installed on your machine. You can download Node.js from the official website. npm comes bundled with Node.js.

Next, create a new Next.js project by running the following command in your terminal:

  1. npx create-next-app my-next-app

Replace `my-next-app` with the desired name for your project. This command will create a new directory with the necessary files and install the required dependencies.

Navigate to your project's directory:

  1. cd my-next-app

To start the development server, run:

  1. npm run dev

Now, open your browser and navigate to http://localhost:3000. You should see the default Next.js welcome page.

3. Creating Pages and Components

In Next.js, pages are automatically created based on the files in the `pages` directory. Each file in this directory corresponds to a route in your application.

Create a new file called `about.js` in the `pages` directory and add the following content:

  1. import React from 'react';
  2.  
  3. const About = () => {
  4. return (
  5. <div>
  6. <h1>About Us</h1>
  7. <p>Welcome to our amazing app!</p>
  8. </div>
  9. );
  10. };
  11.  
  12. export default About;

Now, navigate to http://localhost:3000/about in your browser. You should see the «About Us» page.

Next, let's create a reusable `component`. Create a new directory called `components` at the root level of your project. Inside the components directory, create a new file called `Header.js` and add the following content:

  1. import React from 'react';
  2. import Link from 'next/link';
  3.  
  4. const Header = () => {
  5. return (
  6. <header>
  7. <nav>
  8. <ul>
  9. <li>
  10. <Link href="/">
  11. <a>Home</a>
  12. </Link>
  13. </li>
  14. <li>
  15. <Link href="/about">
  16. <a>About</a>
  17. </Link>
  18. </li>
  19. </ul>
  20. </nav>
  21. </header>
  22. );
  23. };
  24.  
  25. export default Header;

This component creates a simple `header` with navigation links. Import and use the Header component in both `pages/index.js` and `pages/about.js`:

  1. import Header from '../components/Header';
  2.  
  3. // Add the following line inside the main div of each page
  4. <Header />

4. Handling Data Fetching

Next.js provides built-in support for fetching data on both the client and the server. For server-side data fetching, you can use the getServerSideProps function.

Create a new file called posts.js in the pages directory and add the following content:

  1. import React from 'react';
  2. import Header from '../components/Header';
  3.  
  4. export async function getServerSideProps() {
  5. const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  6. const data = await response.json();
  7.  
  8. return {
  9. props: {
  10. posts: data.slice(0, 10),
  11. },
  12. };
  13. }
  14.  
  15. const Posts = ({ posts }) => {
  16. return (
  17. <div>
  18. <Header />
  19. <h1>Posts</h1>
  20. <ul>
  21. {posts.map((post) => (
  22. <li key={post.id}>{post.title}</li>
  23. ))}
  24. </ul>
  25. </div>
  26. );
  27. };
  28.  
  29. export default Posts;

In this example, we use the `getServerSideProps` function to fetch a list of posts from the JSONPlaceholder API. The data is fetched on the server side, and the resulting `props` object is passed to the `Posts` component. The component then renders the list of posts.

5. Deploying Your App

Next.js provides a simple and straightforward deployment process using Vercel, the platform created by the same team behind Next.js. To deploy your app, follow these steps:

1. Sign up for a free account on Vercel.

2. Install the Vercel CLI globally using the following command:

  1. npm install -g vercel

3. In your terminal, navigate to your project's directory and run:

  1. vercel

4. Follow the prompts to connect your project to Vercel and deploy it. After the deployment process is complete, you'll receive a unique URL where your app is accessible.

That's it! You've successfully built and deployed a server-rendered React app using Next.js.

6. Conclusion

In this tutorial, we covered the basics of creating a Next.js app, including setting up a project, creating pages and components, handling server-side data fetching, and deploying the app. Next.js provides a powerful and streamlined solution for building server-rendered React applications, and its built-in features and optimizations make it an excellent choice for developers looking to create high-performance web apps.

As you gain experience with Next.js, you'll discover many more features and best practices to improve your projects further. Keep learning, experimenting, and building!

We use cookies to improve your browsing experience. By continuing to use this website, you consent to our use of cookies. Learn More