Edited Next.JS documentation

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

@@ -5,4 +5,58 @@ sidebar_label: Next.js - API MiddleWares
 sidebar_position: 2
 tags: [Next.js API Routes ]
 description: "In this section, you will learn about API routes in  NEXT ."
----
+---
+
+Next.js - API MiddleWares
+
+API Routes in Next.JS have built-in middlewares which helps in parsing the incoming request.
+
+Following are the middlewares
+
+- req.cookies − cookies object contains the cookies sent by the request. Default value is {}.
+
+- req.query − query object contains the query string. Default value is {}.
+
+- req.body − query object contains the request body parsed using 'content-type'. Default value is null.
+
+Let's create an example to demonstrate the same.
+
+In this example, we are going to update an user.js in pages/api directory.
+
+Let's update the nextjs project used in API Routes chapter.
+
+Create user.js file in pages/api directory as following.
+
+```
+export default (req, res) => {
+   res.statusCode = 200
+   res.setHeader('Content-Type', 'application/json')
+   res.end(JSON.stringify({ query: req.query }))
+}
+```
+Start Next.js Server
+
+Run the following command to start the server −.
+
+```
+npm run dev
+
+> nextjs@1.0.0 dev D:\Node\nextjs
+> next
+
+ready - started server on http://localhost:3000
+info  - Loaded env from D:\Node\nextjs\.env.local
+event - compiled successfully
+event - build page: /api/user
+wait  - compiling...
+event - compiled successfully
+event - build page: /next/dist/pages/_error
+wait  - compiling...
+event - compiled successfully
+```
+
+## Verify Output
+
+Open http://localhost:3000/api/user?counter=1 in a browser and you will see the following output.
+
+``` {"query":{"counter":"1"}} ```

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

@@ -5,4 +5,64 @@ sidebar_label: Next.js - Api Routes
 sidebar_position: 1
 tags: [Next.js API Routes ]
 description: "In this section, you will learn about API routes in  NEXT ."
----
+---
+
+Next.js - Api Routes
+
+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 −
+
+```
+export default (req, res) => {
+   ...
+}
+
+```
+
+Following are some important points to consider.
+
+- req − req is an instance of http.IncomingMessage and is used to get data from request.
+
+- res − res is an instance of http.ServerResponse and is used to send data as response.
+
+Let's create an example to demonstrate the same.
+
+In this example, we are going to create an user.js in pages/api directory.
+
+Let's update the nextjs project used in Global CSS Support chapter.
+
+Create user.js file in pages/api directory as following.
+
+```
+export default (req, res) => {
+   res.statusCode = 200
+   res.setHeader('Content-Type', 'application/json')
+   res.end(JSON.stringify({ name: 'Robert' }))
+}
+```
+
+Start Next.js Server
+
+Run the following command to start the server −.
+
+```
+npm run dev
+
+> nextjs@1.0.0 dev D:\Node\nextjs
+> next
+
+ready - started server on http://localhost:3000
+info  - Loaded env from D:\Node\nextjs\.env.local
+event - compiled successfully
+event - build page: /api/user
+wait  - compiling...
+event - compiled successfully
+event - build page: /next/dist/pages/_error
+wait  - compiling...
+event - compiled successfully
+```
+
+## Verify Output
+
+Open localhost:3000/api/user in a browser and you will see the following output.
+
+```{"name":"Robert"} ```

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

@@ -1,8 +1,61 @@
 ---
 id:  api-Responsehelpers
-title: Next.js - Next.js - Response Helpers
-sidebar_label: Next.js - Next.js - Response Helpers
+title: Next.js -Response Helpers
+sidebar_label: Next.js - Response Helpers
 sidebar_position: 3
 tags: [Next.js API Routes ]
 description: "In this section, you will learn about API routes in  NEXT ."
----
+---
+
+Next.js - Response Helpers
+
+res object have express.js like helper methods to ease development to create services.
+
+Following are the response helper methods
+
+- res.status(code) − This methods set the status of response. Code passed must be a valid HTTP status.
+
+- req.json(json) − This method returns a JSON response. json passed must be a valid JSON object.
+
+- req.send(body) − This methods sends an HTTP response. Response can be string, object or Buffer.
+
+Let's create an example to demonstrate the same.
+
+In this example, we are going to update an user.js in pages/api directory.
+
+Let's update the nextjs project used in API Routes chapter.
+
+Create user.js file in pages/api directory as following.
+
+```
+export default (req, res) => {
+   res.status(200).json({ name: 'Robert' });
+}
+
+```
+Start Next.js Server
+
+Run the following command to start the server −.
+
+```
+npm run dev
+
+> nextjs@1.0.0 dev D:\Node\nextjs
+> next
+
+ready - started server on http://localhost:3000
+info  - Loaded env from D:\Node\nextjs\.env.local
+event - compiled successfully
+event - build page: /api/user
+wait  - compiling...
+event - compiled successfully
+event - build page: /next/dist/pages/_error
+wait  - compiling...
+event - compiled successfully
+```
+
+## Verify Output
+
+Open http://localhost:3000/api/user in a browser and you will see the following output.
+
+```{ name: 'Robert' }```

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

@@ -1,6 +1,6 @@
 {
     "label": "Next.js API routes",
-    "position": 3,
+    "position": 1,
     "link": {
         "type": "generated-index",
         "description": "In this section, you will learn about API routes in  NEXT ."

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

@@ -1,6 +1,6 @@
 {
     "label": "Next.js Features",
-    "position": 1,
+    "position": 0,
     "link": {
         "type": "generated-index",
         "description": "In this section, you will learn about Features of NEXT ."

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

@@ -1,9 +1,72 @@
 ---
 id: routing-ImperativeRouting
 title: Next.js - Imperative Routing
-sidebar_label: Next.js - Next.js - Imperative Routing
+sidebar_label: Next.js - Imperative Routing
 sidebar_position: 3
 tags: [Next.js Routing]
 description: "In this section, you will learn about Routing in NEXT ."
 ---
 
+
+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.
+
+Update index.js file in pages directory as following.
+
+```
+import Router from 'next/router'
+import Head from 'next/head'
+
+function HomePage(props) {
+   return (
+      <>
+         <Head>
+            <title>Welcome to Next.js!</title>
+         </Head>
+         <div>Welcome to Next.js!</div>
+         <span onClick={() => Router.push('/posts/one')}>First Post</span>
+         <br/>
+         <div>Next stars: {props.stars}</div>
+         <img src="/logo.png" alt="TutorialsPoint Logo" />
+      </>	    
+   )
+}
+
+export async function getServerSideProps(context) {
+   const res = await fetch('https://api.github.com/repos/vercel/next.js')
+   const json = await res.json()
+   return {
+      props: { stars: json.stargazers_count }
+   }
+}
+
+export default HomePage
+
+```
+
+Start Next.js Server
+Run the following command to start the server −.
+```
+npm run dev
+> nextjs@1.0.0 dev \Node\nextjs
+> next
+
+ready - started server on http://localhost:3000
+event - compiled successfully
+event - build page: /
+wait  - compiling...
+event - compiled successfully
+event - build page: /next/dist/pages/_error
+wait  - compiling...
+event - compiled successfully
+
+```
+## Verify Output
+
+Open localhost:3000 in a browser and you will see the following output.
+
+```
+Home page with Router
+```
+Click on First post which is not a link but is clickable.
+
+First page with Data

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

@@ -7,3 +7,65 @@ tags: [Next.js Routing]
 description: "In this section, you will learn about Routing in NEXT ."
 ---
 
+
+
+In Next.js, shallow routing refers to navigating to same page but no calls to getServerSideProps, getStaticProps, and getInitialProps methods.
+
+To do shallow routing, we use Router with shallow flag as true. See the below example.
+
+Update index.js file in pages directory as following.
+
+```
+import Router from 'next/router'
+import Head from 'next/head'
+
+function HomePage(props) {
+   return (
+      <>
+         <Head>
+            <title>Welcome to Next.js!</title>
+         </Head>
+         <div>Welcome to Next.js!</div>
+         <span onClick={() => Router.push('/?counter=1', undefined, { shallow: true })}>Reload</span>
+         <br/>
+         <div>Next stars: {props.stars}</div>
+         <img src="/logo.png" alt="TutorialsPoint Logo" />
+      </>	    
+   )
+}
+
+export async function getServerSideProps(context) {
+   const res = await fetch('https://api.github.com/repos/vercel/next.js')
+   const json = await res.json()
+   return {
+      props: { stars: json.stargazers_count }
+   }
+}
+
+export default HomePage
+Start Next.js Server
+```
+
+Run the following command to start the server −.
+
+```
+npm run dev
+> nextjs@1.0.0 dev \Node\nextjs
+> next
+
+ready - started server on http://localhost:3000
+event - compiled successfully
+event - build page: /
+wait  - compiling...
+event - compiled successfully
+event - build page: /next/dist/pages/_error
+wait  - compiling...
+event - compiled successfully
+
+```
+
+## Verify Output
+
+Open localhost:3000 in a browser and then click on Reload link and you will see the following output.
+
+``` Home page with Shallow Routing ```

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

@@ -1,18 +1,14 @@
 ---
 id:  Routing
 title: Next.js Routing
-sidebar_label: Next.js  Routing
+sidebar_label: Next.js-Routing
 sidebar_position: 1
 tags: [Next.js Routing]
 description: "In this section, you will learn about Routing in NEXT ."
 ---
 
 
 
-
-## Next.js - Routing
-
-
 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.
 
 - Index Routes − An index.js file present in a folder maps to root of directory. For example −