Steps to Create NextJS Application
Step 1: Create a NextJS application using the following command.
npx create-next-app@latest gfg
Step 2: It will ask you some questions, so choose as the following.
√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... No
Step 3: After creating your project folder i.e. gfg, move to it using the following command.
cd gfg
Folder Structure:
Example: The below example demonstrates the use Headers function in Next.js.
Note: Remove the included css file from layout.js file.
//pages.js
import { headers } from "next/headers";
export default function Home() {
const headerList = headers();
const referer = headerList.get("referer");
const userAgent = headerList.get("user-agent");
const acceptLanguage = headerList.get("accept-language");
const host = headerList.get("host");
const acceptEncoding = headerList.get("accept-encoding");
return (
<div>
<h1 style={{ color: "green" }}>
w3wiki | headers Next.js</h1>
<h2>HTTP Headers:</h2>
<ul>
<li>Referer: {referer}</li>
<li>User-Agent: {userAgent}</li>
<li>Accept-Language: {acceptLanguage}</li>
<li>Host: {host}</li>
<li>Accept-Encoding: {acceptEncoding}</li>
</ul>
</div>
);
}
Start your application using the command.
npm run dev
Output:
Next.js Headers
Next.js is a React framework that is used to build full-stack web applications. It is used both for front-end as well and back-end. It comes with a powerful set of features to simplify the development of React applications. One of its features is the Header function. In this article, we will learn about Header function with it’s syntax and examples.