title: nextjs add dynamic classNames with static classNames
body: <p>I have just started with nextjs. To add the CSS class names dynamically this is what I am doing</p>
  <pre><code>&lt;div className={selected? [styles.list,styles.half].join(&quot; &quot;) : styles.list}&gt;
  </code></pre>
  <p>Now <code>styles.list</code> is the common in both if/else.</p>
  <p>I tried</p>
  <pre><code>&lt;div className={styles.list} className={selected? styles.half : ''}&gt;
  </code></pre>
  <p>but this shows</p>
  <pre><code>JSX elements can not have multiple atrributes with same name
  </code></pre>
  <p>is there any way to achieve the same?</p>