Cookie Consent by Free Privacy Policy Generator 📌 Getting Started with Next.js: Part 2 - Creating Pages and Routing


✅ Getting Started with Next.js: Part 2 - Creating Pages and Routing


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

Introduction

Welcome back to our Next.js series! In Part 2, we will delve into creating pages and leveraging the built-in routing system of Next.js. This tutorial builds directly on the initial setup we discussed in Part 1. Today, we will add more pages to our application and explore how to navigate between them using the powerful routing features that Next.js offers.

Step 1: Creating a New Page

One of the highlights of Next.js is its simplicity in creating new pages. Pages in Next.js are React components exported from files within the pages directory, where the file path becomes the URL path.

How to Create a New Page

  1. Open Your Project: Ensure you're in your project directory where your Next.js app lives.
  2. Navigate to the Pages Directory: This folder is where all your page components (JavaScript files) are stored.
  3. Create a New JavaScript File for Your Page:

    • About Page: Create a file named about.js in the pages directory.
    • Add the Following Code:
     function About() {
       return (
         <div>
           <h1>About Us</h1>
           <p>Welcome to our website. Here, you can find information about our mission and team.</p>
         </div>
       );
     }
    
     export default About;
    

    This code defines a simple React component for your About page, which will be accessible at /about on your website.

Step 2: Linking Between Pages

To enable smooth navigation without page reloads, Next.js uses a component called Link from next/link.

Implementing Navigation with the Link Component

  1. Edit the Home Page:
    • Go to the pages/index.js.
  2. Import the Link Component:

    • Add the import statement at the top of your file:
     import Link from 'next/link';
    
  3. Add a Navigation Link:

    • Modify the existing function or component to include a link to the About page:
     function Home() {
       return (
         <div>
           <h1>Welcome to Next.js!</h1>
           <Link href="/about"><a>About Us</a></Link>
         </div>
       );
     }
    
     export default Home;
    
  • This modification adds an anchor tag wrapped in a Link component. When clicked, it navigates to the About page without a full page reload, demonstrating the single-page application behavior.

Step 3: Testing Navigation

Now that you've implemented navigation, it's time to test it:

  1. Start the Development Server:

    • If not already running, execute:
     npm run dev
    
  2. Open Your Browser:

    • Go to http://localhost:3000 to view your Next.js application.
  3. Navigate Using Your New Link:

    • Click on the "About Us" link on the homepage. It should take you to the About page seamlessly.

Conclusion

Congratulations! You've successfully added a new page to your Next.js app and implemented client-side navigation. These are foundational skills for building dynamic single-page applications (SPAs) with Next.js.

Stay tuned for Part 3, where we will explore API routes and how to handle server-side data fetching in Next.js.

...

✅ Basic Routing and Pages in Next.js


📈 31.04 Punkte

✅ Getting Started with Next.js: Part 5 - Static Site Generation and Incremental Static Regeneration


📈 30.89 Punkte

✅ Getting Started with Next.js: Part 6 - Advanced Configuration and Optimization


📈 30.89 Punkte

✅ Getting Started with Next.js: Part 7 - Internationalization and Localization


📈 30.89 Punkte

✅ Getting Started with Next.js: Part 1 - Setting Up Your Project


📈 29.36 Punkte

✅ Getting Started with Next.js: Part 3 - API Routes


📈 29.36 Punkte

✅ Getting Started with Next.js: Part 4 - Server-Side Rendering (SSR)


📈 29.36 Punkte

✅ " Getting Started with HTML: Building Blocks of Web Pages


📈 27.74 Punkte

✅ Host NextJS for Free on GitHub Pages || Deploying a Next.js (App Router) Application to GitHub Pages


📈 26.84 Punkte

✅ Open Routing: Facebook gibt interne Plattform für Backbone-Routing frei


📈 26.37 Punkte

✅ Advanced Routing: Homematic IP bekommt intelligentes Routing


📈 26.37 Punkte

✅ Kotlin Routing - routing everything


📈 26.37 Punkte

✅ Getting started with Radio Communication hacking for IoT– Part 1 – Radio Frequency Basics and Theory


📈 25.1 Punkte

✅ Building Your First Browser Game with Three.js and React: Part 1 - Getting Started


📈 25.1 Punkte

✅ Changed to CenturyLink DSL and now I'm getting very odd routing and broken connectivity in Bridge mode


📈 23.83 Punkte

✅ Power Pages SPA: hash-based routing


📈 23.71 Punkte

✅ [PowerShell for Pentester] Part 2: Getting Started Empire


📈 23.56 Punkte

✅ [PowerShell for Pentester] Part 2: Getting Started Empire


📈 23.56 Punkte

✅ Metasploit Basics, Part 1: Getting Started with Metasploit


📈 23.56 Punkte

✅ Azure Blockchain Tokens Part 1: Getting Started


📈 23.56 Punkte

✅ Getting Started in Android Apps Pen-testing (Part-1)


📈 23.56 Punkte

✅ Transformer Models 101: Getting Started — Part 1


📈 23.56 Punkte

✅ Getting started on the Linux (or Unix) command line, Part 1


📈 23.56 Punkte

✅ Getting started on the Linux (or Unix) command line, Part 2


📈 23.56 Punkte

✅ Getting started on the Linux (or Unix) command line, Part 3


📈 23.56 Punkte

✅ Getting started on the Linux (or Unix) command line, Part 4


📈 23.56 Punkte

✅ Getting started with scripting on Linux, Part 1


📈 23.56 Punkte

✅ Getting Started With GraphQL & Why it is Required (Part 1)


📈 23.56 Punkte











matomo

Datei nicht gefunden!