Codemirror with NextJS using Dynamic Import
Codemirror is a library used to style the code of web applications. It supports various languages with different styling and themes. But it can get a little tricky when working with server-side rendering and NextJS. The most common error I got was `ReferenceError: navigator is not defined`. This is because navigator is a browser API and is not available on server-side rendering. To solve this problem NextJS has an alternate solution of dynamically importing the library.
Unlike static import, dynamic import can be placed anywhere in the code. It loads the module and returns a promise that resolves into a module object that contains all its exports. Dynamic import in NextJS can be used in three ways - 1. With named exports, 2. With custom loading component and 3. No SSR.
This would showcase as following
Because this is not rendered on the server-side, SEO might not be able to read the data. In that case, we code showcase it in <code> tag and then hide that element once codemirror is rendered.