title: Cannot use ant layout slider collapsable with SSR with NextJs
body: <p>I'm using antd within my NextJs app. I placed a Layout component at the top level of my app.</p>
  <pre><code>/* _app.tsx */
  function MyApp({ Component, pageProps }: AppProps) {
    return (
      &lt;Provider store={store}&gt;
        &lt;SideMenuLayout&gt;
          &lt;div&gt;Patate&lt;/div&gt;
        &lt;/SideMenuLayout&gt;
      &lt;/Provider&gt;
    );
  }
  
  /* sideMenuLayout.tsx */
  const SideMenuLayout = ({ children }: SideMenuLayoutProps) =&gt; {
    const [collapsed, setCollapsed] = useState(false);
    const { Sider } = Layout;
  
    return (
      &lt;Layout style={{ minHeight: &quot;100vh&quot; }}&gt;
        &lt;Sider collapsible collapsed={collapsed} onCollapse={setCollapsed}&gt;
          &lt;div className=&quot;logo&quot; /&gt;
          &lt;Menu theme=&quot;dark&quot; defaultSelectedKeys={[&quot;1&quot;]} mode=&quot;inline&quot;&gt;
            &lt;Menu.Item key=&quot;2&quot; icon={&lt;DesktopOutlined /&gt;}&gt;
              Play
            &lt;/Menu.Item&gt;
          &lt;/Menu&gt;
        &lt;/Sider&gt;
        &lt;Layout className=&quot;site-layout&quot;&gt;{children}&lt;/Layout&gt;
      &lt;/Layout&gt;
    );
  };
  </code></pre>
  <p>I get the error &quot;Warning: useLayoutEffect does nothing on the server&quot;.</p>
  <p>I understand &lt;sider collapsible... use this useLayoutEffect. I don't understand why default mode is SSR in my case. I'm not sure how I should proceed if I wanna keep the sider collapsable.</p>
  <p>Thanks!</p>