Next.js Tutorial
Selected Reading
- Next.js - Discussion
- Next.js - Useful Resources
- Next.js - Quick Guide
- Next.js - CLI
- Next.js - Deployment
- Next.js - Environment Variables
- Next.js - Typescript
- Next.js - Response Helpers
- Next.js - API MiddleWares
- Next.js - API Routes
- Next.js - Shallow Routing
- Next.js - Imperitive Routing
- Next.js - Dynanic API Routes
- Next.js - Routing
- Next.js - Pre-Rendering
- Next.js - Global CSS Support
- Next.js - CSS Support
- Next.js - Meta Data
- Next.js - Static File Serving
- Next.js - Pages
- Next.js - Environment Setup
- Next.js - Overview
- Next.js - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Next.js - Routing
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 −
pages/index.js maps to / .
pages/posts/index.js maps to /posts .
Nested Routes − Any nested folder structure in pages directory because router url automatically. For example −
pages/settings/dashboard/about.js maps to /settings/dashboard/about .
pages/posts/first.js maps to /posts/first .
Dynamic Routes − We can use named parameter as well to match url. Use brackets for the same. For example −
pages/posts/[id].js maps to /posts/:id where we can use URL pke /posts/1 .
pages/[user]/settings.js maps to /posts/:user/settings where we can use URL pke /abc/settings .
pages/posts/[...all].js maps to /posts/* where we can use any URL pke /posts/2020/jun/ .
Page Linking
Next.JS allows to pnk pages on cpent side using Link react component. It has following properties −
href − name of the page in pages directory. For example /posts/first which refers to first.js present in pages/posts directory.
Let s create an example to demonstrate the same.
In this example, we ll update index.js and first.js page to make a server hit to get data.
Let s update the nextjs project used in chapter.
Update index.js file in pages directory as following.
import Link from next/pnk
import Head from next/head
function HomePage(props) {
return (
<>
<Head>
<title>Welcome to Next.js!</title>
</Head>
<span>Welcome to Next.js!</span>
<Link href="/posts/first">> <a>First Post</a></Link>
<br/>
<span>Next stars: {props.stars}</span>
<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 extjs > next ready - started server on http://localhost:3000 event - compiled successfully event - build page: / wait - compipng... event - compiled successfully event - build page: /next/dist/pages/_error wait - compipng... event - compiled successfully
Verify Output
Open localhost:3000 in a browser and you will see the following output.
Cpck on First post pnk.
Advertisements