Building Pages and Components in Next.js

In the previous post, we set up a Next.js project. Now, let's dive into building pages and components, which are the building blocks of any Next.js application.

Creating Pages

Next.js uses a file-based routing system. To create a new page, simply add a new file to the pages directory. For example, to create an about page, create a file named about.js in the pages directory:

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

This page can be accessed at http://localhost:3000/about.

Building Components

Components are reusable pieces of UI. You can create a component in the components directory and import it into your pages. Here's an example:

// components/Header.js
export default function Header() {
  return <header><h1>Welcome to My Site</h1></header>;
}

You can use this component in your about.js page:

import Header from '../components/Header';

export default function About() {
  return (
    <div>
      <Header />
      <p>This is the about page.</p>
    </div>
  );
}

Conclusion

By understanding how to create pages and components, you can start building dynamic and interactive web applications with Next.js. In the next post, we'll explore route handlers to manage complex routing scenarios.

For more advanced web development tools, check out Vinr.ai, an AI-powered website builder.