Getting Started with Next.js

Next.js is a powerful React framework that enables developers to build fast, scalable, and user-friendly applications with minimal setup. Whether you’re building a simple static site or a complex web application, Next.js offers features that enhance performance and developer experience. This post will guide you through the steps to get started with Next.js.

Prerequisites

Before you start, ensure you have the following installed:

• Node.js (v12.22.0 or later)
• npm or yarn

Step 1: Create a New Next.js Project

To create a new Next.js project, use the following command in your terminal:

npx create-next-app@latest my-next-app

Replace my-next-app with your desired project name. This command will set up a new directory with a basic Next.js app structure.

Step 2: Navigate to Your Project Directory

Once the setup is complete, navigate into your project directory:

cd my-next-app

Step 3: Start the Development Server

To start the development server, run:

npm run dev

or if you're using yarn:

yarn dev

Your application will be available at http://localhost:3000. Open this URL in your browser to see your new Next.js app!

Step 4: Explore the Project Structure

Next.js has a specific project structure. Here are the key folders and files:

pages/: Contains all your application routes. Each file corresponds to a route based on its file name. public/: For static assets like images or fonts. styles/: Contains CSS files for styling your application.

Step 5: Create Your First Page

To create a new page, simply add a new file in the pages/ directory. For example, to create an About page, create a file named about.js:

// pages/about.js
export default function About() {
  return <h1>About Us</h1>;
}

You can navigate to this page in your browser at http://localhost:3000/about.

Step 6: Use Dynamic Routes

Next.js supports dynamic routing. To create a dynamic route, use square brackets in your file name. For example, create a file named [id].js in the pages/posts/ directory:

// pages/posts/[id].js
import { useRouter } from "next/router";

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>Post: {id}</h1>;
}

Now, navigating to http://localhost:3000/posts/1 will display "Post: 1".

Step 7: Fetching Data

Next.js allows you to fetch data at build time or request time. To fetch data at build time, use getStaticProps in your page component:

// pages/index.js
export async function getStaticProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>Welcome to Next.js</h1>
      <p>Data fetched: {JSON.stringify(data)}</p>
    </div>
  );
}

Conclusion

Congratulations! You’ve just built your first Next.js application. From here, you can explore more advanced features like API routes, image optimization, and server-side rendering. Next.js has extensive documentation that covers all its capabilities, so be sure to check it out as you continue your journey!

Happy coding!