Next.js Examples

Benefits of studying Next.js
SSG(static site generation). Next.js builds at the React library, meaning Next.js packages take the benefits of React and just provide extra features. The usage of SSR additionally gives you an edge on SEO, which helps your website show up better on search engine results pages.
Next.js also permits you to edit the tag of a domain, which you cannot do in React. The tag is a core part of a webpage’s metadata and contributes to the website’s search engine optimization ranking. Generally, Next.js is taken into consideration to be a greater fully-featured model of React that maintains the intuitiveness React Framework is understood for.
SSR(server-side rendering) works through changing the request glide of the React application such that each additive except the customer ships their integrated to the server.
Examples of Next.js:-
// Example 1
import Head from 'next/head'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Creating Next App</title>
<link rel="icon" href="/faviicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!!</a>
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h3>Documentation →</h3>
<p>Know more about information about Next.js functions and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h3>Learn →</h3>
<p>Know about Next.js in an interactive user-friendly course with quizzes!!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/master/examples"
className={styles.card}
>
<h3>Examples →</h3>
<p>Understand and establish the boilerplate example for Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h3>Deploy →</h3>
<p>
Immediately deploy your Next.js website to a public URL using Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
</a>
</footer>
</div>
)
}
Simply as next includes routes and routing, the framework also gives us a useful link aspect from next/hyperlink. It is able to look a chunk uncommon if you are coming from React Router because it calls for putting an anchor tag link as a baby and passing the href as a prop.
// Example 2
import Link from "next/link";
export default function About() {
return (
<div>
<h1>About Me</h1>
<div>
<Link href={{ pathname: "/aboutus" }}>
<a>Home</a>
</Link>
<Link href={{ pathname: "/blog/[slug]", query: { slug: "123" },
}} >
<a>Blog Post</a>
</Link>
</div>
</div>
);
}
// Example 3
import Link from "next/link";
import Head from "next/head";
export default function About() {
return ( <div>
<Head>
<title>About | My Cool Site</title>
<meta name="description"
content="A must go through website because it's made with Next.js" />
</Head>
<h1>About Me</h1>
<div>
<Link href="/">
<a>Home</a>
</Link>
<Link href="/blog/123">
<a>Blog Post</a>
</Link>
</div>
</div> );
}
Practically you may pick Next.js to construct all styles of websites with distinctive goals and functions. However, there are a few instances when its advantages, features, and the fact it makes use of server-aspect rendering makes it a good one.
Use subsequent.js if you want to construct websites consisting of:
1. Huge multi-person websites
2. SPA and MPA for client-side rendered applications
3. Large eCommerce websites.
Next.js uses a minimalist document system to keep away from a cluttered challenge file, which means the start line carries handiest the bare minimum required to run the app. Information this folder structure will help you manipulate it to suit your personal initiatives.
Learn Next.js 11 and take the Next.js headless blog project course!!
Thank You!!
Sharing is caring
Did you like what Agam singh, Aman Ahmed Siddiqui, Aman Chopra, Aman, Amol Shelke, Anas Khan, Anirudh Panda, Ankur Balwada, Anshul Soni, Arif Shaikh, wrote? Thank them for their work by sharing it on social media.
No comments so far
Curious about this topic? Continue your journey with these coding courses: