This is a Next.js project bootstrapped with create-next-app
.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.js
. The page auto-updates as you edit the file.
Adding New Pages
-
Create a New File: In the /app directory of your Next.js project, create a new folder with the name of the required page. The name of this folder will be used as the route for your new page. For example, if you create a folder named about, the route for this page will be /about. Within the folder, create a page.js and layout.js file.
-
Define a React Component: Each page in Next.js is a React Component. Define a new React Component in the file you created (page.js). For example: export default function About() {return <>About Us</> }
-
Use the Link Component for Navigation: Routing new pages through navigation components (Navbar) is not automated. You must manually add the component for each new page you create.
-
Test Your New Page: Start the Next.js development server and navigate to your new page to ensure it’s working correctly. You can start the server using npm run dev and then go to http://localhost:3000/about in your browser to see your new page.
-
Deploy Your Changes: Once you’ve tested your new page locally, push the changes to the remote repository, automatically triggering the CI/CD pipeline, and the app will be deployed using Vercel. Note that this repository has been connected to Vercel using aryanteng's GitHub account.
Refer to the following documentation for further information:
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
If any help is needed, feel free to reach out to me: (aryan20499@iiitd.ac.in)