Next.js Tutorial - 2

author
October 13, 2024

  • To create the pages, components, public, and styles folders in your Next.js project, and demonstrate how to use them, follow these steps:

    1. Create the folder structure

    Use the following commands to create the required folders:

    mkdir components public styles

    2. Set up your folders

    • pages folder: This folder is automatically created in Next.js projects and holds route-based pages. Next.js will automatically set up routing for files within this folder. If you don't have it, create it using the command:


      mkdir pages

    • components folder: Store all your reusable components here. For example, a button or a header component.

    • public folder: Store static files like images, fonts, etc. These files will be accessible from the root URL.

    • styles folder: Add your global CSS and CSS modules for styling components.

    3. Create and use components

    Let's create a basic Header component and style it with CSS.

    Create a Header component:


    mkdir components/Header
touch components/Header/Header.js
touch styles/Header.module.css

    components/Header/Header.js:


    import styles from '../../styles/Header.module.css';

function Header() {
  return (
    <header className={styles.header}>
      <h1 className={styles.title}>Welcome to My Website</h1>
    </header>
  );
}

export default Header;

    styles/Header.module.css:


    .header {
  background-color: #0070f3;
  color: white;
  padding: 20px;
  text-align: center;
}

.title {
  font-size: 2rem;
}

    4. Add global styles

    Create a globals.css file to hold your global styles:


    touch styles/globals.css

    styles/globals.css:


    body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

    5. Use global styles and components

    To use the global styles and the Header component in your Next.js project, modify the main layout file and the home page.

    For pages router (traditional Next.js)

    • pages/_app.js: Import global styles here.


      import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

    • pages/index.js: Use the Header component and add some additional content.

      pages/index.js:


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

export default function Home() {
  return (
    <div>
      <Header />
      <main>
        <h2>This is the home page</h2>
        <p>Welcome to your Next.js app!</p>
      </main>
    </div>
  );
}

    For app router (if using Next.js 13+ with the app directory)

    • app/layout.js: Import global styles here.

      app/layout.js:


      import '../styles/globals.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

    • app/page.js: Use the Header component and add content.

      app/page.js:


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

export default function Home() {
  return (
    <div>
      <Header />
      <main>
        <h2>This is the home page</h2>
        <p>Welcome to your Next.js app!</p>
      </main>
    </div>
  );
}

    6. Add images to the public folder

    To use static assets like images, place them in the public folder. For example, if you place logo.png in the public folder, you can access it as /logo.png.

    Here’s how you can use an image:


    <img src="/logo.png" alt="Logo" width={100} height={100} />

    7. Run the app

    After setting everything up, run the Next.js development server:


    npm run dev

    Visit http://localhost:3000 in your browser. You should now see the Header component along with the home page content.

    Summary

    • pages or app: Defines route-based pages in Next.js.
    • components: Stores reusable components.
    • public: Holds static files (e.g., images).
    • styles: Holds global and component-specific styles.