How to create a new page in Next.js

In Next.js, creating a new page is a straightforward process. Here are the general steps:

1. Create a New File:

   • Inside the pages directory in your Next.js project, create a new file with the desired name for your page. The pages directory is a special directory in Next.js where each file inside it becomes a route in your application.

   bashCopy code
   touch pages/newPage.js
   

   Replace newPage with the name you want for your page, and make sure to use the .js extension for JavaScript files.

2. Add Content to the New Page:

   • Open the newly created file (newPage.js) and add the necessary content. You can use React components to build your page.

   jsxCopy code
   // pages/newPage.js
   
   import React from 'react';
   
   const NewPage = () => {
     return (
       <div>
         <h1>New Page</h1>
         <p>This is a new page in my Next.js app.</p>
       </div>
     );
   };
   
   export default NewPage;
   

3. Navigate to the New Page:

   • Now, when you run your Next.js app and navigate to http://localhost:3000/newPage (assuming your development server is running on port 3000), you should see the content of your new page.

   bashCopy code
   npm run dev
   

That's it! Next.js automatically handles the routing based on the file structure within the pages directory. Each file in pages becomes a route, and you can organize your pages and sub-pages accordingly.

Remember that this is a basic example, and you can create more complex pages with additional features and routing as needed for your application.