Custom script with Next.js

Question

What's the proper way to create a class toggle function for a slide in menu in Next.js?

I've created a menu, which has togglable slide-in functionality. There's a button which toggles a class "toggled" and then the menu slides in from the side. I'm not sure if such an approach in itself is wrong when using React/Next.js, in which case I'd appreciate alternatives.

So normally I would inline my toggle-script somewhere in the footer, to get optimal speed. It's a very small script, so it doesn't need to be included in a separate file. I just have no idea where to put this script when using Next.js.

I've read that you can use next/head and put the code in a separate file and include the file normally there, but that doesn't sound very optimal to me. This creates a separate request and makes the whole thing slower than it needs to be. And, if it needs to be done this way, how would you preload/push it if you wanted to do that?

You should be integrating the logic of the script into the relevant component within your react app rather than including it as a separate script. — pilchard
– pilchard, Commented Apr 26, 2021 at 17:23

Jonathan Irwin · Accepted Answer · 2021-04-26 19:43:11Z

1

Create a React component - the logic will live there. There is no need to have a separate script file like you would normally have

import React, { useState } from 'react';

const Menu = () => {
  const [toggled, setToggled] = useState(false);

  const class_name = toggled ? 'menu--toggled' : 'menu';

  return (
    <div className={class_name} onClick={setToggled(!toggled)}>
      <div>Menu Item 1</div>
      <div>Menu Item 2</div>
    </div>
  );
};

Hope this sets you on the right track

edited Apr 26, 2021 at 19:43

answered Apr 26, 2021 at 18:05

Jonathan Irwin

5,8672 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

dansan Over a year ago

Thanks for the answer! I've looked into this, but I'm not getting it to work out of the box. What is the checked variable in the example? Could you explain how this is supposed to work?

Jonathan Irwin Over a year ago

@dansan sorry that should have been toggled instead of checked. I have updated the answer. This is just a very rough example of a React menu component that can slide in and out

dansan Over a year ago

Alright, I figured it would be that, but I still didn't manage to get it working. class_name shows up as "--toggled" no matter what I do. I've never seen && used in a declaration like this.

Jonathan Irwin Over a year ago

sorry - another dumb mistake.. I've updated again

dansan Over a year ago

Works great now, thanks! This definitely helps a lot, but I've still got a lot of questions regarding this. For example, let's say I want to toggle a class on an element outside of the component? (For example on the body tag)

Collectives™ on Stack Overflow

Custom script with Next.js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related