This project is a beginner-friendly, example-led course to learn Next.js by building a simple web application step-by-step.
- React.js
- Next.js
- Custom styling with CSS Modules
- Header and Footer components
- Home and About pages
To set up the project locally, follow these steps:
- Clone the repository:
git clone https://github.com/yourusername/nextjs-foundations.git
- Change the directory to the project folder:
cd nextjs-foundations
- Install the dependencies:
npm install
- Start the development server:
npm run dev
- Open your browser and navigate to
http://localhost:3000. The application should be running.
. ├── components │ ├── Footer.js │ ├── Header.js │ └── Navigation.js ├── pages │ ├── about.js │ └── index.js ├── public │ └── favicon.ico ├── styles │ ├── Footer.module.css │ ├── Header.module.css │ ├── Home.module.css │ ├── Navigation.module.css │ └── globals.css ├── .gitignore ├── package.json ├── README.md └── next.config.js
In the project directory, you can run:
Starts the development server.
Open http://localhost:3000 to view the application in the browser.
The page will reload if you make edits.
Builds the app for production to the .next folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
Starts the production server.
Make sure you have built the application with npm run build before running this command.
Contributions are welcome! To contribute:
- Fork the repository.
- Create a new branch with a descriptive name (e.g.,
add-new-feature). - Make your changes in the new branch.
- Commit your changes and push the branch to your fork.
- Create a pull request from your branch to the original repository.
This project is licensed under the MIT License. See the LICENSE file for details.