Skip to content

Commit ac52875

Browse files
dhairyagothidhairyagothi
committed
updated Docs of NEXT.js
1 parent 0a54399 commit ac52875

13 files changed

+414
-0
lines changed

‎docs/NextJs/Next.js API routes/API middlewares.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: API MiddleWares
3+
title: Next.js-API MiddleWares
4+
sidebar_label: Next.js - API MiddleWares
5+
sidebar_position: 2
6+
tags: [Next.js API Routes ]
7+
description: "In this section, you will learn about API routes in NEXT ."
8+
---

‎docs/NextJs/Next.js API routes/API routes.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: Api Routes
3+
title: Next.js - Api Routes
4+
sidebar_label: Next.js - Api Routes
5+
sidebar_position: 1
6+
tags: [Next.js API Routes ]
7+
description: "In this section, you will learn about API routes in NEXT ."
8+
---

‎docs/NextJs/Next.js API routes/Responsehelper.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: Response Helpers
3+
title: Next.js - Next.js - Response Helpers
4+
sidebar_label: Next.js - Next.js - Response Helpers
5+
sidebar_position: 3
6+
tags: [Next.js API Routes ]
7+
description: "In this section, you will learn about API routes in NEXT ."
8+
---

‎docs/NextJs/Next.js API routes/_category.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Next.js API routes",
3+
"position": 3,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "In this section, you will learn about API routes in NEXT ."
7+
}
8+
}

‎docs/NextJs/Next.js Features/_category.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Next.js Features",
3+
"position": 1,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "In this section, you will learn about Features of NEXT ."
7+
}
8+
}

‎docs/NextJs/Next.js Features/metadata.md

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
id: Next.js - Meta Data
3+
title: Next.js - Meta Data
4+
sidebar_label: Next.js - Next.js - Meta Data
5+
sidebar_position: 3
6+
tags: [Next.js Features Pages]
7+
description: "In this section, you will learn about Features of NEXT ."
8+
---
9+
## Next.js - Meta Data
10+
11+
In Next.js, we can serve modify the head section of each react pages very easily with the help of ```<Head>``` react component which is inbuilt.
12+
13+
Let's update the nextjs project used in Pages chapter.
14+
15+
Update index.js as follows −
16+
17+
```
18+
import Link from 'next/link'
19+
import Head from 'next/head'
20+
21+
function HomePage() {
22+
return (
23+
<>
24+
<Head>
25+
<title>Welcome to Next.js!</title>
26+
</Head>
27+
<div>Welcome to Next.js!</div>
28+
<Link href="/posts/first"><a>First Post</a></Link>
29+
<br/>
30+
<img src="/logo.png" alt="TutorialsPoint Logo" />
31+
</>
32+
)
33+
}
34+
35+
export default HomePage
36+
```
37+
38+
Update first.js as follows −
39+
40+
```
41+
import Link from 'next/link'
42+
import Head from 'next/head'
43+
44+
export default function FirstPost() {
45+
return (
46+
<>
47+
<Head>
48+
<title>My First Post</title>
49+
</Head>
50+
<h1>My First Post</h1>
51+
<h2>
52+
<Link href="/">
53+
<a>Home</a>
54+
</Link>
55+
</h2>
56+
</>
57+
)
58+
}
59+
```
60+
61+
Here we've added a reference to logo.png in index.js file.
62+
63+
Start Next.js Server
64+
Run the following command to start the server −.
65+
66+
```
67+
npm run dev
68+
> [email protected] dev \Node\nextjs
69+
> next
70+
71+
ready - started server on http://localhost:3000
72+
event - compiled successfully
73+
event - build page: /
74+
wait - compiling...
75+
event - compiled successfully
76+
event - build page: /next/dist/pages/_error
77+
wait - compiling...
78+
event - compiled successfully
79+
```
80+
81+
82+
## Verify Output
83+
84+
Open localhost:3000 in a browser

‎docs/NextJs/Next.js Features/pages.md

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
---
2+
id: pages
3+
title: Next.js Features - Page
4+
sidebar_label: Next.js Features - Page
5+
sidebar_position: 1
6+
tags: [Next.js Features ]
7+
description: "In this section, you will learn about Features of NEXT ."
8+
---
9+
10+
11+
## Next.js - Pages
12+
13+
14+
In Next.js, we can create pages and navigate between them using file system routing feature. We'll use Link component to have a client side navigation between pages.
15+
16+
In Next.js, a page is a React Component and are exported from pages directory. Each page is associated with a route based on its file name. For example
17+
18+
- pages/index.js is linked with '/' route.
19+
20+
- pages/posts/first.js is linked with '/posts/first' route and so on.
21+
22+
Let's update the nextjs project created in Environment Setup chapter.
23+
24+
Create post directory and first.js within it with following contents.
25+
26+
```
27+
export default function FirstPost() {
28+
return <h1>My First Post</h1>
29+
}
30+
```
31+
Add Link Support to go back to Home page. Update first.js as follows −
32+
33+
```
34+
import Link from 'next/link'
35+
36+
export default function FirstPost() {
37+
return (
38+
<>
39+
<h1>My First Post</h1>
40+
<h2>
41+
<Link href="/">
42+
<a>Home</a>
43+
</Link>
44+
</h2>
45+
</>
46+
)
47+
}
48+
```
49+
Add Link Support to home page to navigate to first page. Update index.js as follows −
50+
51+
```
52+
import Link from 'next/link'
53+
54+
function HomePage() {
55+
return (
56+
<>
57+
<div>Welcome to Next.js!</div>
58+
<Link href="/posts/first"><a>First Post</a></Link>
59+
</>
60+
)
61+
}
62+
63+
export default HomePage
64+
```
65+
66+
## Start Next.js Server
67+
68+
Run the following command to start the server −.
69+
```
70+
npm run dev
71+
> [email protected] dev \Node\nextjs
72+
> next
73+
74+
ready - started server on http://localhost:3000
75+
event - compiled successfully
76+
event - build page: /
77+
wait - compiling...
78+
event - compiled successfully
79+
event - build page: /next/dist/pages/_error
80+
wait - compiling...
81+
event - compiled successfully
82+
```
83+
84+
## Verify Output
85+
86+
Open localhost:3000 in a browser and you will see the following output.
87+
```
88+
Home page
89+
```
90+
Click on First Link and you will see the following output.

‎docs/NextJs/Next.js Features/statcfileserving.md

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
id: Static File Serving
3+
title: Next.js - Static File Serving
4+
sidebar_label: Next.js - Static File Serving
5+
sidebar_position: 2
6+
tags: [Next.js Features ]
7+
description: "In this section, you will learn about Features of NEXT ."
8+
---
9+
10+
11+
12+
## Next.js - Static File Serving
13+
14+
In Next.js, we can serve static pages like images very easily by putting them in public, a top level directory. We can refer these files in similar fashion like pages in pages directory.
15+
16+
In Next.js, a page is a React Component and are exported from pages directory. Each page is associated with a route based on its file name.
17+
18+
Let's update the nextjs project used in Pages chapter.
19+
20+
Create public directory and place any images within it. We've taken logo.png, CODEHARBOUR Logo image.
21+
22+
Update first.js as follows −
23+
```
24+
import Link from 'next/link'
25+
26+
export default function FirstPost() {
27+
return (
28+
<>
29+
<h1>My First Post</h1>
30+
<h2>
31+
<Link href="/">
32+
<a>Home</a>
33+
</Link>
34+
</h2>
35+
<br/">
36+
<img src="/logo.png" alt="CodeHarborhub Logo" />
37+
</>
38+
)
39+
}
40+
```
41+
Here we've added a reference to logo.png in index.js file.
42+
43+
## Start Next.js Server
44+
Run the following command to start the server −.
45+
```
46+
npm run dev
47+
> [email protected] dev \Node\nextjs
48+
> next
49+
50+
ready - started server on http://localhost:3000
51+
event - compiled successfully
52+
event - build page: /
53+
wait - compiling...
54+
event - compiled successfully
55+
event - build page: /next/dist/pages/_error
56+
wait - compiling...
57+
event - compiled successfully
58+
```
59+
60+
## Verify Output
61+
62+
Open localhost:3000 in a browser

‎docs/NextJs/Next.js Routing/Next.js - Imperative Routing.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
id: Imperative Routing
3+
title: Next.js - Imperative Routing
4+
sidebar_label: Next.js - Next.js - Imperative Routing
5+
sidebar_position: 3
6+
tags: [Next.js Routing]
7+
description: "In this section, you will learn about Routing in NEXT ."
8+
---
9+

‎docs/NextJs/Next.js Routing/Next.js - Shallow Routing.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
id: Shallow Routing
3+
title: Next.js - Shallow Routing
4+
sidebar_label: Next.js - Shallow Routing
5+
sidebar_position: 4
6+
tags: [Next.js Routing]
7+
description: "In this section, you will learn about Routing in NEXT ."
8+
---
9+

0 commit comments

Comments
 (0)