https://github.com/dharejo-junaid/next-basics
Practice repository showcasing Next.js fundamentals through a dummy web project. Contains basic HTML elements (h1, p, Link, etc.) as part of my learning journey post-ReactJS. A stepping stone into Next.js for structured web development.
https://github.com/dharejo-junaid/next-basics
app-routing file-system nextjs14 react-framework typescript
Last synced: about 1 year ago
JSON representation
Practice repository showcasing Next.js fundamentals through a dummy web project. Contains basic HTML elements (h1, p, Link, etc.) as part of my learning journey post-ReactJS. A stepping stone into Next.js for structured web development.
- Host: GitHub
- URL: https://github.com/dharejo-junaid/next-basics
- Owner: Dharejo-Junaid
- Created: 2024-03-04T19:34:17.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-04T20:05:41.000Z (about 2 years ago)
- Last Synced: 2025-01-24T16:22:32.785Z (over 1 year ago)
- Topics: app-routing, file-system, nextjs14, react-framework, typescript
- Language: TypeScript
- Homepage:
- Size: 54.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js Basics
This repository is a collection of my practice work with Next.js, focusing on exploring the full potential of app-routing. It serves as a hands-on exploration following my transition from ReactJS to Next.js, aiming to master web development techniques.
## Features
- **Basic to Advanced Routing:** Demonstrates various routing strategies including normal, parallel, and nested routing within a Next.js application.
- **Structured File System:** Utilizes a well-organized file structure with specific files for different purposes, including:
- `page.tsx`: Entry point for pages.
- `default.tsx`: Default layout components.
- `layout.tsx`: Layout definition for the app.
- `error.tsx`: Custom error handling components.
- `not-found.tsx`: Custom 404 page.
- `style.css` & `global-style.css`: CSS files for local and global styles.
- **Dynamic Route Segments:** Incorporates dynamic routing with Next.js using special directory names like `[]`, `()`, and `@` to handle various routing patterns.
## Learning Journey
This repository marks a key milestone in my learning journey, delving into advanced Next.js features for optimized web development. It reflects my commitment to understanding the intricacies of app-routing and the practical implementation of theoretical concepts.
## To explore this repository:
1. Clone the repo to your local machine.
```
git clone https://github.com/Dharejo-Junaid/next-basics.git
```
2. Install dependencies.
```
npm install
```
3. Run the development server.
```
npm run dev
```
4. Navigate through the files to see different routing techniques in action.