From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

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

Creating sidebar component

Creating sidebar component - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Creating sidebar component

“

Let's start with the sidebar creation, we will create a component named sidebar which will be a part of a layout.js file, because it's going to be a common interface in most routes. So first, let me create the components folder in the src folder. And inside, I'll create the sidebar folder, along with the index.js file in it. Now in the index.js, let's create the component. So I'll say export default function sidebar will return the division with an h1, the sidebar. Now let's render it. So as discussed, the sidebar is going to be a common interface for many routes. So it needs to be in the layout.js file. However, we won't be using the layout.js, instead, we will create a folder group which is actually a wrapper to arrange all the routes with the sidebar interface in one place. The reason for this is that you may have the sign in or login pages where the sidebar is not supposed to be rendered. Then in that case, we cannot have the sidebar in this main layout.js. We need to have a…

Contents