Skip to content

updated Docs of NEXT.js #847

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 9, 2024
Merged

updated Docs of NEXT.js #847

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ac52875
updated Docs of NEXT.js
dhairyagothi Jun 9, 2024
b47587a
id updated
dhairyagothi Jun 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions docs/NextJs/Next.js API routes/API middlewares.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
id: api-middlewares
title: Next.js-API MiddleWares
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 ."
---
8 changes: 8 additions & 0 deletions docs/NextJs/Next.js API routes/API routes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
id: api-routes
title: Next.js - Api Routes
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 ."
---
8 changes: 8 additions & 0 deletions docs/NextJs/Next.js API routes/Responsehelper.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
id: api-Responsehelpers
title: Next.js - Next.js - Response Helpers
sidebar_label: Next.js - Next.js - Response Helpers
sidebar_position: 3
tags: [Next.js API Routes ]
description: "In this section, you will learn about API routes in NEXT ."
---
8 changes: 8 additions & 0 deletions docs/NextJs/Next.js API routes/_category.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"label": "Next.js API routes",
"position": 3,
"link": {
"type": "generated-index",
"description": "In this section, you will learn about API routes in NEXT ."
}
}
8 changes: 8 additions & 0 deletions docs/NextJs/Next.js Features/_category.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"label": "Next.js Features",
"position": 1,
"link": {
"type": "generated-index",
"description": "In this section, you will learn about Features of NEXT ."
}
}
84 changes: 84 additions & 0 deletions docs/NextJs/Next.js Features/metadata.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
---
id: features-metadata
title: Next.js - Meta Data
sidebar_label: Next.js - Next.js - Meta Data
sidebar_position: 3
tags: [Next.js Features Pages]
description: "In this section, you will learn about Features of NEXT ."
---
## Next.js - Meta Data

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.

Let's update the nextjs project used in Pages chapter.

Update index.js as follows −

```
import Link from 'next/link'
import Head from 'next/head'

function HomePage() {
return (
<>
<Head>
<title>Welcome to Next.js!</title>
</Head>
<div>Welcome to Next.js!</div>
<Link href="/posts/first"><a>First Post</a></Link>
<br/>
<img src="/logo.png" alt="TutorialsPoint Logo" />
</>
)
}

export default HomePage
```

Update first.js as follows −

```
import Link from 'next/link'
import Head from 'next/head'

export default function FirstPost() {
return (
<>
<Head>
<title>My First Post</title>
</Head>
<h1>My First Post</h1>
<h2>
<Link href="/">
<a>Home</a>
</Link>
</h2>
</>
)
}
```

Here we've added a reference to logo.png in index.js file.

Start Next.js Server
Run the following command to start the server −.

```
npm run dev
> [email protected] 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
90 changes: 90 additions & 0 deletions docs/NextJs/Next.js Features/pages.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
---
id: features-pages
title: Next.js Features - Page
sidebar_label: Next.js Features - Page
sidebar_position: 1
tags: [Next.js Features ]
description: "In this section, you will learn about Features of NEXT ."
---


## Next.js - Pages


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.

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

- pages/index.js is linked with '/' route.

- pages/posts/first.js is linked with '/posts/first' route and so on.

Let's update the nextjs project created in Environment Setup chapter.

Create post directory and first.js within it with following contents.

```
export default function FirstPost() {
return <h1>My First Post</h1>
}
```
Add Link Support to go back to Home page. Update first.js as follows −

```
import Link from 'next/link'

export default function FirstPost() {
return (
<>
<h1>My First Post</h1>
<h2>
<Link href="/">
<a>Home</a>
</Link>
</h2>
</>
)
}
```
Add Link Support to home page to navigate to first page. Update index.js as follows −

```
import Link from 'next/link'

function HomePage() {
return (
<>
<div>Welcome to Next.js!</div>
<Link href="/posts/first"><a>First Post</a></Link>
</>
)
}

export default HomePage
```

## Start Next.js Server

Run the following command to start the server −.
```
npm run dev
> [email protected] 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
```
Click on First Link and you will see the following output.
62 changes: 62 additions & 0 deletions docs/NextJs/Next.js Features/statcfileserving.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
---
id: featuers-staticFileserving
title: Next.js - Static File Serving
sidebar_label: Next.js - Static File Serving
sidebar_position: 2
tags: [Next.js Features ]
description: "In this section, you will learn about Features of NEXT ."
---



## Next.js - Static File Serving

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.

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.

Let's update the nextjs project used in Pages chapter.

Create public directory and place any images within it. We've taken logo.png, CODEHARBOUR Logo image.

Update first.js as follows −
```
import Link from 'next/link'

export default function FirstPost() {
return (
<>
<h1>My First Post</h1>
<h2>
<Link href="/">
<a>Home</a>
</Link>
</h2>
<br/">
<img src="/logo.png" alt="CodeHarborhub Logo" />
</>
)
}
```
Here we've added a reference to logo.png in index.js file.

## Start Next.js Server
Run the following command to start the server −.
```
npm run dev
> [email protected] 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
9 changes: 9 additions & 0 deletions docs/NextJs/Next.js Routing/Next.js - Imperative Routing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
id: routing-ImperativeRouting
title: Next.js - Imperative Routing
sidebar_label: Next.js - Next.js - Imperative Routing
sidebar_position: 3
tags: [Next.js Routing]
description: "In this section, you will learn about Routing in NEXT ."
---

9 changes: 9 additions & 0 deletions docs/NextJs/Next.js Routing/Next.js - Shallow Routing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
id: routing-ShallowRouting
title: Next.js - Shallow Routing
sidebar_label: Next.js - Shallow Routing
sidebar_position: 4
tags: [Next.js Routing]
description: "In this section, you will learn about Routing in NEXT ."
---

Loading
Loading