Skip to content

Commit 10bb9b6

Browse files
dhairyagothidhairyagothi
committed
Edited Next.JS documentation
1 parent f5a5da4 commit 10bb9b6

File tree

11 files changed

+431
-14
lines changed

11 files changed

+431
-14
lines changed

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

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,58 @@ sidebar_label: Next.js - API MiddleWares
55
sidebar_position: 2
66
tags: [Next.js API Routes ]
77
description: "In this section, you will learn about API routes in NEXT ."
8-
---
8+
---
9+
10+
Next.js - API MiddleWares
11+
12+
API Routes in Next.JS have built-in middlewares which helps in parsing the incoming request.
13+
14+
Following are the middlewares
15+
16+
- req.cookies − cookies object contains the cookies sent by the request. Default value is {}.
17+
18+
- req.query − query object contains the query string. Default value is {}.
19+
20+
- req.body − query object contains the request body parsed using 'content-type'. Default value is null.
21+
22+
Let's create an example to demonstrate the same.
23+
24+
In this example, we are going to update an user.js in pages/api directory.
25+
26+
Let's update the nextjs project used in API Routes chapter.
27+
28+
Create user.js file in pages/api directory as following.
29+
30+
```
31+
export default (req, res) => {
32+
res.statusCode = 200
33+
res.setHeader('Content-Type', 'application/json')
34+
res.end(JSON.stringify({ query: req.query }))
35+
}
36+
```
37+
Start Next.js Server
38+
39+
Run the following command to start the server −.
40+
41+
```
42+
npm run dev
43+
44+
> nextjs@1.0.0 dev D:\Node\nextjs
45+
> next
46+
47+
ready - started server on http://localhost:3000
48+
info - Loaded env from D:\Node\nextjs\.env.local
49+
event - compiled successfully
50+
event - build page: /api/user
51+
wait - compiling...
52+
event - compiled successfully
53+
event - build page: /next/dist/pages/_error
54+
wait - compiling...
55+
event - compiled successfully
56+
```
57+
58+
## Verify Output
59+
60+
Open http://localhost:3000/api/user?counter=1 in a browser and you will see the following output.
61+
62+
``` {"query":{"counter":"1"}} ```

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

Lines changed: 61 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,64 @@ sidebar_label: Next.js - Api Routes
55
sidebar_position: 1
66
tags: [Next.js API Routes ]
77
description: "In this section, you will learn about API routes in NEXT ."
8-
---
8+
---
9+
10+
Next.js - Api Routes
11+
12+
API Routes is a way to create rest API using Next.js. Next.js maps any file present in /pages/api folder and will be treated as API end point. An example of API function −
13+
14+
```
15+
export default (req, res) => {
16+
...
17+
}
18+
19+
```
20+
21+
Following are some important points to consider.
22+
23+
- req − req is an instance of http.IncomingMessage and is used to get data from request.
24+
25+
- res − res is an instance of http.ServerResponse and is used to send data as response.
26+
27+
Let's create an example to demonstrate the same.
28+
29+
In this example, we are going to create an user.js in pages/api directory.
30+
31+
Let's update the nextjs project used in Global CSS Support chapter.
32+
33+
Create user.js file in pages/api directory as following.
34+
35+
```
36+
export default (req, res) => {
37+
res.statusCode = 200
38+
res.setHeader('Content-Type', 'application/json')
39+
res.end(JSON.stringify({ name: 'Robert' }))
40+
}
41+
```
42+
43+
Start Next.js Server
44+
45+
Run the following command to start the server −.
46+
47+
```
48+
npm run dev
49+
50+
> nextjs@1.0.0 dev D:\Node\nextjs
51+
> next
52+
53+
ready - started server on http://localhost:3000
54+
info - Loaded env from D:\Node\nextjs\.env.local
55+
event - compiled successfully
56+
event - build page: /api/user
57+
wait - compiling...
58+
event - compiled successfully
59+
event - build page: /next/dist/pages/_error
60+
wait - compiling...
61+
event - compiled successfully
62+
```
63+
64+
## Verify Output
65+
66+
Open localhost:3000/api/user in a browser and you will see the following output.
67+
68+
```{"name":"Robert"} ```

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

Lines changed: 56 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,61 @@
11
---
22
id: api-Responsehelpers
3-
title: Next.js - Next.js - Response Helpers
4-
sidebar_label: Next.js - Next.js - Response Helpers
3+
title: Next.js -Response Helpers
4+
sidebar_label: Next.js - Response Helpers
55
sidebar_position: 3
66
tags: [Next.js API Routes ]
77
description: "In this section, you will learn about API routes in NEXT ."
8-
---
8+
---
9+
10+
Next.js - Response Helpers
11+
12+
res object have express.js like helper methods to ease development to create services.
13+
14+
Following are the response helper methods
15+
16+
- res.status(code) − This methods set the status of response. Code passed must be a valid HTTP status.
17+
18+
- req.json(json) − This method returns a JSON response. json passed must be a valid JSON object.
19+
20+
- req.send(body) − This methods sends an HTTP response. Response can be string, object or Buffer.
21+
22+
Let's create an example to demonstrate the same.
23+
24+
In this example, we are going to update an user.js in pages/api directory.
25+
26+
Let's update the nextjs project used in API Routes chapter.
27+
28+
Create user.js file in pages/api directory as following.
29+
30+
```
31+
export default (req, res) => {
32+
res.status(200).json({ name: 'Robert' });
33+
}
34+
35+
```
36+
Start Next.js Server
37+
38+
Run the following command to start the server −.
39+
40+
```
41+
npm run dev
42+
43+
> nextjs@1.0.0 dev D:\Node\nextjs
44+
> next
45+
46+
ready - started server on http://localhost:3000
47+
info - Loaded env from D:\Node\nextjs\.env.local
48+
event - compiled successfully
49+
event - build page: /api/user
50+
wait - compiling...
51+
event - compiled successfully
52+
event - build page: /next/dist/pages/_error
53+
wait - compiling...
54+
event - compiled successfully
55+
```
56+
57+
## Verify Output
58+
59+
Open http://localhost:3000/api/user in a browser and you will see the following output.
60+
61+
```{ name: 'Robert' }```

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"label": "Next.js API routes",
3-
"position": 3,
3+
"position": 1,
44
"link": {
55
"type": "generated-index",
66
"description": "In this section, you will learn about API routes in NEXT ."

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"label": "Next.js Features",
3-
"position": 1,
3+
"position": 0,
44
"link": {
55
"type": "generated-index",
66
"description": "In this section, you will learn about Features of NEXT ."

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

Lines changed: 64 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,72 @@
11
---
22
id: routing-ImperativeRouting
33
title: Next.js - Imperative Routing
4-
sidebar_label: Next.js - Next.js - Imperative Routing
4+
sidebar_label: Next.js - Imperative Routing
55
sidebar_position: 3
66
tags: [Next.js Routing]
77
description: "In this section, you will learn about Routing in NEXT ."
88
---
99

10+
11+
In Next.js, so far we are using Link react component to navigate from one page to other. There is a programmatic way as well to achive the same using Router component. Generally Router component is used with html tags.
12+
13+
Update index.js file in pages directory as following.
14+
15+
```
16+
import Router from 'next/router'
17+
import Head from 'next/head'
18+
19+
function HomePage(props) {
20+
return (
21+
<>
22+
<Head>
23+
<title>Welcome to Next.js!</title>
24+
</Head>
25+
<div>Welcome to Next.js!</div>
26+
<span onClick={() => Router.push('/posts/one')}>First Post</span>
27+
<br/>
28+
<div>Next stars: {props.stars}</div>
29+
<img src="/logo.png" alt="TutorialsPoint Logo" />
30+
</>
31+
)
32+
}
33+
34+
export async function getServerSideProps(context) {
35+
const res = await fetch('https://api.github.com/repos/vercel/next.js')
36+
const json = await res.json()
37+
return {
38+
props: { stars: json.stargazers_count }
39+
}
40+
}
41+
42+
export default HomePage
43+
44+
```
45+
46+
Start Next.js Server
47+
Run the following command to start the server −.
48+
```
49+
npm run dev
50+
> nextjs@1.0.0 dev \Node\nextjs
51+
> next
52+
53+
ready - started server on http://localhost:3000
54+
event - compiled successfully
55+
event - build page: /
56+
wait - compiling...
57+
event - compiled successfully
58+
event - build page: /next/dist/pages/_error
59+
wait - compiling...
60+
event - compiled successfully
61+
62+
```
63+
## Verify Output
64+
65+
Open localhost:3000 in a browser and you will see the following output.
66+
67+
```
68+
Home page with Router
69+
```
70+
Click on First post which is not a link but is clickable.
71+
72+
First page with Data

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,65 @@ tags: [Next.js Routing]
77
description: "In this section, you will learn about Routing in NEXT ."
88
---
99

10+
11+
12+
In Next.js, shallow routing refers to navigating to same page but no calls to getServerSideProps, getStaticProps, and getInitialProps methods.
13+
14+
To do shallow routing, we use Router with shallow flag as true. See the below example.
15+
16+
Update index.js file in pages directory as following.
17+
18+
```
19+
import Router from 'next/router'
20+
import Head from 'next/head'
21+
22+
function HomePage(props) {
23+
return (
24+
<>
25+
<Head>
26+
<title>Welcome to Next.js!</title>
27+
</Head>
28+
<div>Welcome to Next.js!</div>
29+
<span onClick={() => Router.push('/?counter=1', undefined, { shallow: true })}>Reload</span>
30+
<br/>
31+
<div>Next stars: {props.stars}</div>
32+
<img src="/logo.png" alt="TutorialsPoint Logo" />
33+
</>
34+
)
35+
}
36+
37+
export async function getServerSideProps(context) {
38+
const res = await fetch('https://api.github.com/repos/vercel/next.js')
39+
const json = await res.json()
40+
return {
41+
props: { stars: json.stargazers_count }
42+
}
43+
}
44+
45+
export default HomePage
46+
Start Next.js Server
47+
```
48+
49+
Run the following command to start the server −.
50+
51+
```
52+
npm run dev
53+
> nextjs@1.0.0 dev \Node\nextjs
54+
> next
55+
56+
ready - started server on http://localhost:3000
57+
event - compiled successfully
58+
event - build page: /
59+
wait - compiling...
60+
event - compiled successfully
61+
event - build page: /next/dist/pages/_error
62+
wait - compiling...
63+
event - compiled successfully
64+
65+
```
66+
67+
## Verify Output
68+
69+
Open localhost:3000 in a browser and then click on Reload link and you will see the following output.
70+
71+
``` Home page with Shallow Routing ```

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
---
22
id: Routing
33
title: Next.js Routing
4-
sidebar_label: Next.js Routing
4+
sidebar_label: Next.js-Routing
55
sidebar_position: 1
66
tags: [Next.js Routing]
77
description: "In this section, you will learn about Routing in NEXT ."
88
---
99

1010

1111

12-
13-
## Next.js - Routing
14-
15-
1612
Next.js uses file system based router. Whenever we add any page to pages directory, it is automatically available via url. Following are the rules of this router.
1713

1814
- Index Routes − An index.js file present in a folder maps to root of directory. For example −

0 commit comments

Comments
 (0)