Mohamad's website

How to make a Next.js website

Web Development

Jul 19, 2023

Welcome, beginners, to this step-by-step guide on how to create a website using Next.js! Next.js is a popular and powerful framework for building React applications, providing server-side rendering, routing, and more out of the box. We'll keep things simple and focus on getting to the boilerplate stage, where you'll have a basic setup ready to start building your website. Let's dive in!

Step 1: Set Up Your Environment

Before we start, make sure you have Node.js and npm (Node Package Manager) installed on your computer. You can download them from the official Node.js website.

Step 2: Initialize a New Next.js Project

Open your terminal or command prompt and run the following commands:

1
2

npx create-next-app my-next-website
cd my-next-website

Step 3: Explore the Project Structure

Next.js has a predefined folder structure to keep things organized. The main folder you'll work with is pages. It contains your website pages. Each file in this folder represents a page accessible via its URL path.

my-next-website
 ├── node_modules
 ├── pages
 │  ├── api
 │  │   └── hello.js
 │  ├── _app.js
 │  ├── _document.js
 │  ├── index.js
 │  └── posts
│       └── [id].js
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── styles
│   ├── globals.css
│   └── Home.module.css
├── .gitignore
├── next.config.js
├── package-lock.json
├── package.json
└── README.md

Step 4: Run the Development Server

To see your website in action, run the development server with the following command blown. Then, open your browser and go to http://localhost:3000/. You should see your Next.js website running!

npm run dev

Step 5: Create Your First Page

Let's create a simple "Home" page. Inside the pages folder, create a new file called index.js. The file's content should look like this:

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Welcome to My Next.js Website!</h1>
      <p>This is your Home page. Start building your amazing website here.</p>
    </div>
  );
};

export default Home;

Step 6: Create Additional Pages

Creating additional pages is just as easy. For example, to add an About page, create a new file called about.js inside the pages folder:

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the About page. Learn more about our website and team here.</p>
    </div>
  );
};

export default About;

Step 7: Navigation

To navigate between pages, you can use Next.js's built-in Link component. Update your index.js to include a link to the About page:

import React from 'react';
import Link from 'next/link';

const Home = () => {
  return (
    <div>
      <h1>Welcome to My Next.js Website!</h1>
      <p>This is your Home page. Start building your amazing website here.</p>
      <Link href="/about">
        <a>About Us</a>
      </Link>
    </div>
  );
};

export default Home;

Step 8: Styling Your Website

To apply styles to your website, you can create CSS files in the styles folder or use CSS-in-JS libraries like styled-components. For simplicity, we'll use a CSS file.

Create a new file called global.css inside the styles folder, and add some basic styles:

body {
  font-family: Arial, sans-serif;
}

a {
  color: #0070f3;
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  text-decoration: underline;
}

Step 9: Deploy Your Website

Once you're happy with your website, it's time to share it with the world! There are several platforms where you can host Next.js applications, such as Vercel, Netlify, or AWS Amplify.

For example, to deploy with Vercel:

1. Create a free account on Vercel.

2. Connect your GitHub repository (where your Next.js project is hosted) to Vercel.

3. Follow the deployment instructions, and Vercel will automatically deploy your website.

Congratulations! You now have a simple Next.js website up and running.

Conclusion

In this blog post, we covered the essential steps to create a website using Next.js. We started by setting up the project, explored the folder structure, and ran the development server. We created a few pages, set up navigation between them, applied basic styles, and finally, deployed our website.

Remember, this is just the beginning. Next.js offers many powerful features, and you can now build upon this boilerplate to create sophisticated web applications. Happy coding!