Jayant1) Adding Meta & tag
Meta data helps the Search engine crawler to get the Info. about the Site, like its Title and Description
To add the Title & the Meta Data we have to use the <Head> Component.
import Head from 'next/Head';
// H Must be Capital
Inside the Head Component we can add the Title & Meta Data
return (
<>
<Head>
<title>NEXT JS Events</title>
<meta title="description" content="List of all Events"/>
<Head/>
<h1>HOMEPAGE</h1>
</>
)
Some Imp. Tips while Using Head Comp.
- If we have multiple return statements for single Page then we can assign the value of the Head component to a variable and then use that everywhere.
let head = (
<Head>
<title> Filtered Event</title>
<meta title="description" content="List of Filtered Data" />
</Head>
);
return (
<>
{head}
<h1>HI</h1>
</>
)
-
If we want to apply generic meta data inside the Head for every page, we can include that in the
_app.jsfile.
import "../styles/globals.css";
import Head from "next/head";
//! This App Component is gonna rendered on every page
//! with this we can add any generic components like Navbar or Head
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
{/*
//! Generic Head
//* If we don't apply the head then these gonna apply.
//* Next JS merges the Head
//* If we have the page Title & meta data then these will not apply
//* Also Next JS Merges the Head [if there are more than one, means we can
have more than one head in single page], & the Content of the head will be selected on
priority bases, if we have 2 title then 2nd title will be taken.
*/}
<title>Next JS Event</title>
<meta title="description" content="List of all Events" />
</Head>
<Component {...pageProps} />
</>
);
}
export default MyApp;
Merging Heads → Next JS merges the head and combines them into one if we have multiple heads. If the head has the same tags inside it but with different content, then the latest head component will be taken. We can separate the meta tag using the key attribute.
2) Reusing Components
_App.js File
It is the Root Component of our Application. The _app file is called during each page initialisation.
This can be used for 2 things
- Reusing a Common Layout / Component
- Adding Global CSS to our Entire App
import Layout from "../components/layout/layout";
import "../styles/globals.css";
import Head from "next/head";
//! This App Component is gonna rendered on every page
//! with this we can add any generic components like Navbar or Head
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Head>
{/*
//! Generic Head
//* If we don't apply the head then these gonna apply.
//* Next JS merges the Head
*/}
<title>Next JS Event</title>
<meta title="description" content="List of all Events" />
</Head>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp;
_document.js
The _document file is called during page initialization and it is used to override the default Document page. Within the _document file you can update the HTML and Body tags to override the default implementation.
This can be used for 2 things
- Adding a Custom Language to the HTML Tag
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
- Adding a Custom ClassName to the Body Tag
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html>
<Head />
<body className="bg-black">
<Main />
<NextScript />
</body>
</Html>
);
}
- Adding an HTML Tag, separate from the DOM Tree
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
// We can make changes into this file & that directly affect the HTML Document
return (
<Html lang="en">
<Head />
{/* Not same as Head tag used Earlier */}
{/* CSS Applied to Body tag */}
<body style={{ backgroundColor: "black" }}>
{/* This Div will be placed before all the Components and separate from the DOM Tree*/}
<div>HI There Inside Everything</div>
<Main />
{/* All the components are rendered inside the Main */}
<NextScript />
</body>
</Html>
);
}
Optimising Images
Next JS has its own Image Component for images Optimization
import Image from "next/image";
export default function optimized() {
return (
<>
{/*
//! The Next Js Image also need 2 component width & height, these are the width and width which are used when our page is loaded, and CSS will also apply.
//* Next JS doesn't prerender the Image, It will render when it needs it, Next Js creates multiple version of the Image & optimise them for the different screen sizes & then save them for later use.
*/}
<Image src={"/" + image} alt={title} width="250" height="300" />
</>
);
}
