From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Building the header

Building the header

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Building the header

“

Welcome to this session on building the header component for our React Story Collection app. In this lecture, we'll create a persistent header that appears on every page. This header will display the site's title and subtitle, link back to the home page, and include a language switcher using the language context. Moving to header.jsx. Now I import the UseLanguage hook from our language context. This hook will allow us to access our translation function and display text in different languages. I am now adding the T function from the UseLanguage hook. This will allow us to translate text within our component based on the selected language. Let's add a div with the class name container inside our header element. Now you will see me nest another div inside the container with a class of Flex. This will allow us to use Flexbox for aligning and distributing space among the headers elements. I import the Link component from React Router DOM. This is essential for creating navigable links…

Contents