Next.js Tutorial: Building a Complete Web App from Scratch with React, Server-Side Rendering, and SEO-Friendly URLs
Tags: nextjs, react, javascript, webdev
Published: 2023-02-15 17:18:55

In this tutorial, we'll cover the following steps:

Setting up a new Next.js project
Understanding the project structure
Creating pages and routing
Working with data
Styling with CSS
Deploying your Next.js app
By the end of this tutorial, you'll have a solid understanding of how to build a Next.js app from scratch. Let's get started!

Step 1: Setting up a new Next.js project
To get started with Next.js, you'll need to have Node.js installed on your machine. If you don't already have it installed, you can download it from the official website: https://nodejs.org/en/.

Once you have Node.js installed, you can use the npx command to create a new Next.js project:

lua
Copy code
npx create-next-app my-app
This will create a new Next.js project in a directory called my-app.

Once the project is created, you can navigate into the directory and start the development server by running:

bash
Copy code
cd my-app
npm run dev
This will start the development server and open your app in the browser at http://localhost:3000. You should see a default Next.js landing page.

Step 2: Understanding the project structure
Before we start building our app, let's take a look at the project structure that Next.js has generated for us:

java
Copy code
my-app/
├── .next/
├── node_modules/
├── pages/
│   ├── index.js
│   └── api/
│       └── hello.js
├── public/
│   ├── favicon.ico
│   └── vercel.svg
├── styles/
│   ├── globals.css
│   └── Home.module.css
├── .gitignore
├── package.json
└── README.md
Here's a brief overview of what each directory and file does:

.next/: This directory contains Next.js's build output. You should not modify the contents of this directory directly.
node_modules/: This directory contains all of the dependencies that your project needs to run. You should not modify the contents of this directory directly.
pages/: This directory contains your app's pages. Each file in this directory represents a page of your app.
public/: This directory contains any static assets that you want to serve with your app, such as images, videos, or fonts.
styles/: This directory contains your app's CSS styles.
.gitignore: This file tells Git which files and directories to ignore when committing changes to your repository.
package.json: This file contains metadata about your project, including its dependencies and scripts.
README.md: This file contains information about your project that other developers might find useful.
Step 3: Creating pages and routing
Now that we understand the project structure, let's create a new page for our app. In Next.js, each file in the pages/ directory represents a page of your app.

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

jsx
Copy code
function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of our app.</p>
    </div>
  );
}

export default About;
Now, if you navigate to http://localhost:3000/about, you should see the contents of the About component.

Next, let's add some navigation to our app.

To add navigation to our app, we can use the built-in Link component from Next.js. The Link component allows us to create client-side navigation between pages without a full page reload.

In our index.js file, let's add a link to the about page we just created:

jsx
Copy code
import Link from 'next/link';

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to our app.</p>
      <Link href="/about">
        <a>About Us</a>
      </Link>
    </div>
  );
}

export default Home;
Now, if you click the "About Us" link, you should be taken to the about page without a full page reload.

Step 4: Working with data
Next, let's work with some data in our app. In this example, we'll use the JSONPlaceholder API to fetch some data and display it on our page.

First, let's install the isomorphic-fetch package, which allows us to use the fetch API both server-side and client-side:

sql
Copy code
npm install isomorphic-fetch
Next, let's create a new file called posts.js in the pages/ directory and add the following code:

jsx
Copy code
import fetch from 'isomorphic-fetch';

function Posts({ posts }) {
  return (
    <div>
      <h1>Posts Page</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await response.json();
  return { props: { posts } };
}

export default Posts;
In this code, we're using the getStaticProps function to fetch data from the JSONPlaceholder API and pass it to our Posts component as a prop.

Now, if you navigate to http://localhost:3000/posts, you should see a list of posts fetched from the API.

Step 5: Styling with CSS
Next, let's add some styles to our app. Next.js allows us to use CSS modules to create scoped styles for each component.

In our Home component, let's add a class name to the h1 element and create a new CSS module to style it:

jsx
Copy code
import Link from 'next/link';
import styles from '../styles/Home.module.css';

function Home() {
  return (
    <div>
      <h1 className={styles.title}>Home Page</h1>
      <p>Welcome to our app.</p>
      <Link href="/about">
        <a>About Us</a>
      </Link>
    </div>
  );
}

export default Home;
In our styles/Home.module.css file, let's add some styles for the title class:

css
Copy code
.title {
  font-size: 3rem;
  color: #0070f3;
}
Now, if you navigate to http://localhost:3000, you should see the "Home Page" title in blue and with a larger font size.

Step 6: Deploying your Next.js app
Finally, let's deploy our app to the web so that other people can use it. One popular platform for hosting Next.js apps is Vercel, which offers a free tier for personal projects.

To deploy your app to Vercel,
follow these steps:

Create an account on Vercel by signing up at https://vercel.com/signup.

Install the Vercel CLI by running the following command in your terminal:

Copy code
npm install -g vercel
Navigate to the root directory of your Next.js app.

Run the following command to link your app to your Vercel account:

Copy code
vercel login
Run the following command to deploy your app to Vercel:

Copy code
vercel
Follow the prompts in your terminal to configure your deployment settings.

Once your app is deployed, you can access it at the URL provided by Vercel.

Congratulations, you've now deployed your Next.js app to the web!

Conclusion
In this tutorial, we've covered the basics of building a Next.js app for [next.js developers](https://www.cronj.com/hire-next-js-developer) from scratch. We started by creating a new app with the create-next-app command, and then we added some pages, navigation, data fetching, and styling.

Next.js is a powerful framework that offers many features out of the box, such as server-side rendering, automatic code splitting, and static site generation. By following this tutorial, you should now have a solid foundation for building your own Next.js apps.

If you'd like to learn more about Next.js, be sure to check out the official documentation at https://nextjs.org/docs. Happy coding!