How to Create a Website with Next.js

Start with Next Js starter to learn how work with Next Js

Next Js Source Code Project Free Download →

Step 1: Install Node.js and Set Up Your Environment

Before you start, ensure you have Node.js installed on your system. You can download it from the official Node.js website if you haven't already.

Step 2: Create a New Next.js Project

The easiest way to set up a new Next.js project is by using the create-next-app command line tool. Open your terminal and run:

npx create-next-app my-next-website

This command will create a new folder called my-next-website with all the necessary files and dependencies for your Next.js project. Once the installation is complete, navigate to the project directory:

cd my-next-website

Step 3: Start the Development Server

To start your development server, run:

npm run dev

This will start the server, and you can access your application at http://localhost:3000 in your browser. The development server comes with hot reloading, so any changes you make to your code will be reflected immediately.

Step 4: Understand the Project Structure

Here’s a brief overview of the key directories and files in your Next.js project:

• pages: This folder contains all the pages of your application. Each file in this folder corresponds to a route. For example, index.js corresponds to the / route, and about.js corresponds to the /about route.
• public: This folder is for static assets such as images, fonts, and other files that you want to serve directly.
• styles: This folder contains global CSS files.
• package.json: This file contains scripts and dependencies for your project.

Step 5: Create Pages

To create new pages, simply add new files to the pages folder. For example, to create an about page, you would add an about.js file:

// pages/about.js
import React from 'react';

const AboutPage = () => {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
};

export default AboutPage;

You can also create dynamic routes by using parameterized file names. For example, to create a page for each item in a list, you might use [parameter].js:

// pages/colors/[color].js
import React from 'react';

const ColorPage = ({ color }) => {
  return (
    <div>
      <h1>{color}</h1>
      <p>This is the page for {color}.</p>
    </div>
  );
};

export default ColorPage;

To generate static pages for these dynamic routes, you need to define the getStaticPaths function:

// pages/colors/[color].js
import React from 'react';
import colors from '../../data/colors.json';

export const getStaticPaths = async () => {
  const paths = colors.map((color) => ({ params: { color: color.name } }));
  return { paths, fallback: false };
};

const ColorPage = ({ color }) => {
  return (
    <div>
      <h1>{color}</h1>
      <p>This is the page for {color}.</p>
    </div>
  );
};

export default ColorPage;

Step 6: Implement Routing and Navigation

Next.js provides several ways to navigate between routes:

Using the <Link> Component

The <Link> component is the primary way to navigate between routes. It extends the HTML <a> tag and provides prefetching and client-side navigation.

// pages/index.js
import Link from 'next/link';

const HomePage = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/about">About Us</Link>
    </div>
  );
};

export default HomePage;

Using the useRouter Hook

The useRouter hook allows you to programmatically change routes from client components.

// pages/index.js
'use client';
import { useRouter } from 'next/navigation';

const HomePage = () => {
  const router = useRouter();

  return (
    <div>
      <h1>Home Page</h1>
      <button type="button" onClick={() => router.push('/about')}>
        About Us
      </button>
    </div>
  );
};

export default HomePage;

For more details on routing and navigation, refer to the [Next.js documentation].

Step 7: Add Styling

You can add global styles to your application by editing the styles/globals.css file. For component-specific styles, you can create CSS files in the same directory as your components.

Here’s an example of adding a global style:

/* styles/globals.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  color: #333;
}

Step 8: Test and Deploy Your Application

Before deploying your application, make sure to test it thoroughly. You can run your application in development mode to see changes in real-time.

To build your application for production, run:

npm run build

And to start the production server, run:

npm run start

You can deploy your Next.js application to various platforms such as Vercel, Netlify, or your own server. Here is how you can deploy it to Vercel:

1. Create a Vercel Account: If you don't have one, sign up at Vercel.
2. Link Your GitHub Repository: Connect your GitHub repository to Vercel.
3. Deploy: Vercel will automatically detect that it's a Next.js project and deploy it.

By following these steps, you can create a fully functional website using Next.js, leveraging its powerful features for server-side rendering, static site generation, and optimized performance.

Next Js Source Code Project Free Download →