Create a Standalone Page

To create standalone pages in your NextJs application, you can follow the steps below. These instructions will help you create the specified JSX files for the pages:

Step 1: Create the Home Page

Create a file called app/page.jsx with the following code:

import React from "react";
 
const HomePage = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <p>This is the Home Page</p>
    </div>
  );
};
 
export default HomePage;

This code creates a standalone home page that can be accessed at the root URL (e.g., http://localhost:3000/).

Step 2: Create a Custom Page

Create a file called app/foo/page.jsx with the following code:

import React from "react";
 
const FooPage = () => {
  return (
    <div>
      <h1>Foo Page</h1>
      <p>This is the Foo Page</p>
    </div>
  );
};
 
export default FooPage;

This code creates a standalone page that can be accessed at http://localhost:3000/foo. Replace "foo" with the desired URL path for your custom page.

Step 3: Create a Dynamic Page

Create a file called app/foo/[slug]/page.jsx with the following code:

import React from "react";
import { useRouter } from "next/router";
 
const DynamicPage = () => {
  const router = useRouter();
  const { slug } = router.query;
 
  return (
    <div>
      <h1>Dynamic Page</h1>
      <p>This is the Dynamic Page with slug: {slug}</p>
    </div>
  );
};
 
export default DynamicPage;

This code creates a dynamic standalone page that can be accessed at http://localhost:3000/foo/bar, where "bar" can be replaced with any desired slug value. The useRouter hook from Next.js is used to retrieve the slug from the URL.

Make sure to adjust the file paths and URLs based on your project structure and routing configuration.

By following these steps and creating the respective JSX files, you can easily create standalone pages in your React application.

Introduction Navbar