next js next/head head
// Import the Head component from the 'next/head' module
import Head from 'next/head';
// Functional component representing the page
const MyPage = () => {
return (
// JSX code for the page content
<div>
{/ Head component used to modify the document head /}
<Head>
{/ Set the title of the page /}
<title>My Page Title</title>
{/ Add a meta tag with the description of the page /}
<meta name="description" content="Description of my page" />
{/ Add a link tag for a stylesheet /}
<link rel="stylesheet" href="/styles.css" />
</Head>
{/ Rest of the page content /}
<div>
<h1>Hello, Next.js!</h1>
<p>This is my Next.js page.</p>
</div>
</div>
);
};
// Export the component for use in other files
export default MyPage;
In this example:
1. The Head component from the 'next/head' module is imported.
2. The MyPage functional component is defined.
3. Inside the component, the Head component is used to modify the document head.
4. The <title> tag is used to set the title of the page.
5. A <meta> tag is added with the name attribute set to "description" to provide a description of the page.
6. A <link> tag is used to include an external stylesheet named "styles.css".
7. The rest of the page content follows with a simple heading and paragraph.
8. Finally, the MyPage component is exported for use in other files.