Growthus
Nextjs
Create a New Page

Create a Page

To create standalone pages, you can follow the provided instructions. Here are the steps to create the specified JSX files for standalone pages:

  1. Create a file at app/page.jsx:
import React from 'react';

const HomePage = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <p>This is the Home Page</p>
    </div>
  );
};

export default HomePage;

This file will create a standalone home page accessible at http://localhost:3000/ (opens in a new tab).

  1. Create a file at app/foo/page.jsx:
import React from 'react';

const FooPage = () => {
  return (
    <div>
      <h1>Foo Page</h1>
      <p>This is the Foo Page</p>
    </div>
  );
};

export default FooPage;

This file will create a standalone page accessible at http://localhost:3000/foo (opens in a new tab).

  1. Create a file at app/foo/[slug]/page.jsx:
import React from 'react';

const DynamicPage = () => {

  return (
    <div>
      <h1>Inner Page</h1>
      <p>This is the Inner Page</p>
    </div>
  );
};

export default DynamicPage;

This file will create a dynamic standalone page where the slug can be replaced with any value. It will be accessible at http://localhost:3000/foo/bar (opens in a new tab), where "bar" can be replaced with any desired slug value.

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