diff --git a/docs/NextJs/Next.js API routes/API middlewares.md b/docs/NextJs/Next.js API routes/API middlewares.md index e80e2a3b6..f89279249 100644 --- a/docs/NextJs/Next.js API routes/API middlewares.md +++ b/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 ." ---- \ No newline at end of file +--- + +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"}} ``` \ No newline at end of file diff --git a/docs/NextJs/Next.js API routes/API routes.md b/docs/NextJs/Next.js API routes/API routes.md index 8067dc3fa..1cb278eaa 100644 --- a/docs/NextJs/Next.js API routes/API routes.md +++ b/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 ." ---- \ No newline at end of file +--- + +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"} ``` \ No newline at end of file diff --git a/docs/NextJs/Next.js API routes/Responsehelper.md b/docs/NextJs/Next.js API routes/Responsehelper.md index da1d2a1f8..b754cd4c6 100644 --- a/docs/NextJs/Next.js API routes/Responsehelper.md +++ b/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 ." ---- \ No newline at end of file +--- + +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' }``` \ No newline at end of file diff --git a/docs/NextJs/Next.js API routes/_category.json b/docs/NextJs/Next.js API routes/_category.json index 3108e5c55..eb033cfa2 100644 --- a/docs/NextJs/Next.js API routes/_category.json +++ b/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 ." diff --git a/docs/NextJs/Next.js Features/_category.json b/docs/NextJs/Next.js Features/_category.json index ac098e70d..53f2f4fba 100644 --- a/docs/NextJs/Next.js Features/_category.json +++ b/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 ." diff --git a/docs/NextJs/Next.js Routing/Next.js - Imperative Routing.md b/docs/NextJs/Next.js Routing/Next.js - Imperative Routing.md index de6770122..f54cdbf4d 100644 --- a/docs/NextJs/Next.js Routing/Next.js - Imperative Routing.md +++ b/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 ( + <> + + Welcome to Next.js! + +
Welcome to Next.js!
+ Router.push('/posts/one')}>First Post +
+
Next stars: {props.stars}
+ 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 \ No newline at end of file diff --git a/docs/NextJs/Next.js Routing/Next.js - Shallow Routing.md b/docs/NextJs/Next.js Routing/Next.js - Shallow Routing.md index c4edbd9ca..f13043a2d 100644 --- a/docs/NextJs/Next.js Routing/Next.js - Shallow Routing.md +++ b/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 ( + <> + + Welcome to Next.js! + +
Welcome to Next.js!
+ Router.push('/?counter=1', undefined, { shallow: true })}>Reload +
+
Next stars: {props.stars}
+ 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 ``` \ No newline at end of file diff --git a/docs/NextJs/Next.js Routing/Next.js -Routing.md b/docs/NextJs/Next.js Routing/Next.js -Routing.md index 755dea221..12d174eae 100644 --- a/docs/NextJs/Next.js Routing/Next.js -Routing.md +++ b/docs/NextJs/Next.js Routing/Next.js -Routing.md @@ -1,7 +1,7 @@ --- 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 ." @@ -9,10 +9,6 @@ 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 − diff --git a/docs/NextJs/Next.js Routing/Next.js-Dynamic API Routing.md b/docs/NextJs/Next.js Routing/Next.js-Dynamic API Routing.md index 00d0028ce..e61481c7f 100644 --- a/docs/NextJs/Next.js Routing/Next.js-Dynamic API Routing.md +++ b/docs/NextJs/Next.js Routing/Next.js-Dynamic API Routing.md @@ -1,9 +1,114 @@ --- id: Routing-DynamicAPIRouting title: Dynamic API Routing -sidebar_label: Next.js Dynamic API Routing +sidebar_label: Next.js-Dynamic API Routing sidebar_position: 2 tags: [Next.js Routing] description: "In this section, you will learn about Routing in NEXT ." --- + + +In Next.js, we can create routes dynamically. In this example, we'll create pages on the fly and their routing. + +- Step 1. Define [id].js file − [id].js represents the dynamic page where id will be relative path. Define this file in pages/post directory. + +- Step 2. Define lib/posts.js − posts.js represents the ids and contents. lib directory is to be created in root directory. +[id].js + +- Update [id].js file with getStaticPaths() method which sets the paths and getStaticProps() method to get the contents based on id. + +``` +import Link from 'next/link' +import Head from 'next/head' +import Container from '../../components/container' + +import { getAllPostIds, getPostData } from '../../lib/posts' + +export default function Post({ postData }) { + return ( + + {postData.id} +
+ {postData.title} +
+ {postData.date} + + ) +} +export async function getStaticPaths() { + const paths = getAllPostIds() + return { + paths, + fallback: false + } +} + +export async function getStaticProps({ params }) { + const postData = getPostData(params.id) + return { + props: { + postData + } + } +} +posts.js +posts.js contains getAllPostIds() to get the ids and getPostData() to get corresponding contents. + +export function getPostData(id) { + const postOne = { + title: 'One', + id: 1, + date: '7/12/2020' + } + + const postTwo = { + title: 'Two', + id: 2, + date: '7/12/2020' + } + if(id == 'one'){ + return postOne; + }else if(id == 'two'){ + return postTwo; + } +} + +export function getAllPostIds() { + return [{ + params: { + id: 'one' + } + }, + { + params: { + id: 'two' + } + } +]; +} +``` + +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/posts/one in a browser and you will see the following output. ``` + +``` Open localhost:3000/posts/two in a browser and you will see the following output. ``` diff --git a/docs/NextJs/image.png b/docs/NextJs/image.png new file mode 100644 index 000000000..678ede338 Binary files /dev/null and b/docs/NextJs/image.png differ diff --git a/docs/NextJs/resources.md b/docs/NextJs/resources.md new file mode 100644 index 000000000..1d3b48099 --- /dev/null +++ b/docs/NextJs/resources.md @@ -0,0 +1,24 @@ +--- +id: nextjs-resources +title: Next.js - Useful Resources +sidebar_label: Next.js - Resources +sidebar_position: 27 +tags: [Next.js Routing] +description: "In this section, you will get some resources of Next.Js" +--- + + + +The following resources contain additional information on Next.js. Please use them to get more in-depth knowledge on this topic. + +## Useful Links on Next.js + +Next.js Official Site [− Your main resource for Next.js documentation and examples etc.](https://nextjs.org/) + +## Useful Books on Next.js + +![Next.js-books](image.png) + + - Next.js Quick Start Guide: Server-side rendering done + - Advanced Web Development with React: SSR and PWA with Next.js using React with advanced concepts + - Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications \ No newline at end of file