DEV Community: Sheik Mostafizur

Hiding Root Layout in Next.js Subpages: A Step-by-Step Guide

Sheik Mostafizur — Fri, 14 Mar 2025 08:30:43 +0000

This guide will show you how to hide the root layout in specific subpages within a Next.js application. Follow the steps below to get started.

Step 1: Set Up a Next.js Project

First, create a new Next.js project if you haven't already:

npx create-next-app@latest your-project-name
cd your-project-name

Step 2: Create Layouts and Pages

Next, organize your project by creating layouts and pages. For this example, we will create several layouts and pages to demonstrate how to hide the root layout for specific subpages.

File and Folder Structure

Ensure your project folder structure looks like this:

├── favicon.ico
├── globals.css
├── layout.tsx
├── page.tsx
├── (post)
│   ├── (create)
│   │   └── post
│   │       └── create
│   │           └── page.tsx
│   └── post
│       ├── layout.tsx
│       └── page.tsx
└── (root)
    ├── about
    │   └── page.tsx
    ├── home
    │   └── page.tsx
    └── layout.tsx

Explanation:

layout.tsx contains the main layout for the root page.
The (post) directory has its own layout, which will be shown when visiting post-related pages.
The (create) directory contains a page for creating posts and has no layout to show the root layout.

Step 3: Visit `http://localhost:3000/post` to View Layout

Navigate to http://localhost:3000/post in your browser, and you should see the layout as defined in the post-related layout file.

Step 4: Visit `http://localhost:3000/post/create` to Hide Layout

Next, visit http://localhost:3000/post/create. You will see that the root layout is hidden for this page, as the layout has been excluded in the create page directory.

Repository Link

Follow Me

If you found this guide helpful, feel free to connect with me on social media!

How to Automatically Insert Formatted Dates in Visual Studio Code

Sheik Mostafizur — Sat, 12 Oct 2024 11:08:32 +0000

When writing code or documentation, having the current date formatted correctly can save you time and help keep your projects organized. In Visual Studio Code (VSCode), while there's no built-in functionality for inserting formatted dates like "Oct 12, 2024" directly, there are effective methods to achieve this. In this post, we’ll explore how to insert formatted dates using snippets and extensions in VSCode.

Step-by-Step Guide

    /************   Current Date **************/
  "Insert Current Date": {
      "prefix": "currentDate",
      "body": [
          "${CURRENT_MONTH_NAME_SHORT} ${CURRENT_DATE}, ${CURRENT_YEAR}"
      ],
      "description": "Insert the current date in Oct 10, 2024 format"
  }

How to use it?

Go to any file then write currentDate
If auto suggestion not work press ctrl+space

Follow me

How to Build a Multi-Role Routing System in React

Sheik Mostafizur — Tue, 08 Oct 2024 01:49:13 +0000

Role-Based Profile Switch Mode

This project demonstrates a role-based profile switch system using React, TypeScript, and React Router. Users are categorized into different roles, and based on their role, they are routed to specific pages. The available roles are:

Guest
Authenticated User
Owner
Admin

The routing logic is dynamically handled by AuthContext and the profileMode which maps to the user's role.

Project Structure

.
├── App.css
├── App.tsx
├── assets
│   └── react.svg
├── components
│   └── profile-switch.tsx       # Component to handle profile switching
├── context
│   └── index.tsx                # Contains AuthContext for handling user state
├── index.css
├── main.tsx
├── pages                        # Pages corresponding to different roles
│   ├── admin.tsx                # Admin home page
│   ├── authenticated.tsx        # Authenticated user home page
│   ├── guest-home.tsx           # Guest home page
│   └── owner.tsx                # Owner home page
├── ROLE.ts                      # Defines role constants
├── routes
│   └── index.tsx                # Main routing logic based on role
└── vite-env.d.ts

`routes/index.tsx`

This file contains the logic to switch between different routes based on the user’s role, defined in the AuthContext. It uses React Router's Routes and Route components to conditionally render pages based on the auth.profileMode.

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  Routes,
} from "react-router-dom";
import { useContext } from "react";
import { AuthContext } from "../context";
import { GuestHome } from "../pages/guest-home";
import { AuthenticatedHome } from "../pages/authenticated";
import { OwnerHome } from "../pages/owner";
import { AdminHome } from "../pages/admin";
import { role } from "../ROLE";

const guestRoutes = (
  <Route>
    <Route path="/" element={<GuestHome />} />
  </Route>
);

const authenticatedRoutes = (
  <Route>
    <Route path="/" element={<AuthenticatedHome />} />
  </Route>
);

const ownerRoutes = (
  <Route>
    <Route path="/" element={<OwnerHome />} />
  </Route>
);

const adminRoutes = (
  <Route>
    <Route path="/" element={<AdminHome />} />
  </Route>
);

const RootRoutes = () => {
  const { auth } = useContext(AuthContext);

  if (auth.profileMode === role.authenticated) {
    return <Routes>{authenticatedRoutes}</Routes>;
  }
  if (auth.profileMode === role.owner) {
    return <Routes>{ownerRoutes}</Routes>;
  }

  if (auth.profileMode === role.admin) {
    return <Routes>{adminRoutes}</Routes>;
  }

  return <Routes>{guestRoutes}</Routes>;
};

const router: ReturnType<typeof createBrowserRouter> = createBrowserRouter(
  createRoutesFromElements(<Route path="/*" element={<RootRoutes />} />)
);

export default router;

Role Definitions in `ROLE.ts`

export const role = {
  guest: "guest",
  authenticated: "authenticated",
  owner: "owner",
  admin: "admin",
};

How It Works

AuthContext: Stores the user's authentication state, including the profileMode that determines which set of routes to display.
Profile Modes: Based on the value of profileMode, different sets of routes are activated:
- guest: Displays the GuestHome page.
- authenticated: Displays the AuthenticatedHome page.
- owner: Displays the OwnerHome page.
- admin: Displays the AdminHome page.
Dynamic Routing: The app dynamically switches between routes based on the user's role.

Getting Started

Clone the repository.
Install the dependencies:

   npm install

Run the development server:

   npm run dev

Open the app in the browser at http://localhost:3000/.

Technologies Used

React: For building the user interface.
TypeScript: For static typing and better developer experience.
React Router: For routing based on user roles.
Vite: For fast development server and build setup.

Repo Source Code: role-base-profile-switch

Follow me

How do you contribute to open-source projects?

Sheik Mostafizur — Thu, 03 Oct 2024 04:08:47 +0000

Find a Project

Look for a project you're passionate about or use regularly. Check platforms like GitHub, GitLab, or Bitbucket.

Understand the Project

Go through the README file, guidelines, and documentation to understand the project's goals and how contributions work.

Fork the Repository

Click on the "Fork" button on GitHub to create a copy of the project in your account. This allows you to make changes without affecting the original project.

Clone the Repository

Clone the forked repository to your local machine using the git clone command.

Ex:

git clone https://github.com//edust.git
cd edust

Make Contributions

Modify the code, fix bugs, add new features, or improve the documentation based on the project needs.

Commit Changes

After making your changes, commit them using the following commands:

Ex:

git add .
git commit -m "Describe your changes"

Push Changes

Push the changes to your forked repository:
git push

Submit a Pull Request (PR)

Go to the forked repository and click "New Pull Request" to request that your changes be merged. Provide a clear description of what you did.

Celebrate!

Once your PR is merged, you've officially contributed to open source! 🎉

What is JavaScript?

Sheik Mostafizur — Tue, 25 Jul 2023 01:42:37 +0000

JavaScript is a lightweight, object-oriented, scripting, dynamic programming language that's used for web development. It's can create, read, update, and delete an HTML Element.

DEV Community: Sheik Mostafizur

Hiding Root Layout in Next.js Subpages: A Step-by-Step Guide

Step 1: Set Up a Next.js Project

Step 2: Create Layouts and Pages

File and Folder Structure

Explanation:

Step 3: Visit http://localhost:3000/post to View Layout

Step 4: Visit http://localhost:3000/post/create to Hide Layout

Repository Link

Follow Me

How to Automatically Insert Formatted Dates in Visual Studio Code

Step-by-Step Guide

How to use it?

Follow me

How to Build a Multi-Role Routing System in React

Role-Based Profile Switch Mode

Project Structure

routes/index.tsx

Role Definitions in ROLE.ts

How It Works

Getting Started

Technologies Used

Repo Source Code: role-base-profile-switch

Follow me

How do you contribute to open-source projects?

What is JavaScript?

Step 3: Visit `http://localhost:3000/post` to View Layout

Step 4: Visit `http://localhost:3000/post/create` to Hide Layout

`routes/index.tsx`

Role Definitions in `ROLE.ts`