Import de librerías por Client Side Render

Uno de los problemas que me topé al hacer un desarrollo con Next fue el importar librerías que solo funcionaban del lado del cliente. Por ejemplo, librerías que usan windows.

import "particles.js";

Esto va a botar un error como el siguiente:

window is not defined
ReferenceError: window is not defined
    at Object.<anonymous> (C:\app\node_modules\particles.js\particles.js:1429:1)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at Object.particles.js (webpack:/external "particles.js":1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 1c41f11882ca3bf913fd:21:0)
    at Object../components/Portada.js (C:\app\.next\server\bundles\pages\index.js:329:71)
    at __webpack_require__ (webpack:/webpack/bootstrap 1c41f11882ca3bf913fd:21:0)
    at Object../pages/index.js (C:\app\.next\server\bundles\pages\index.js:416:78)
    at __webpack_require__ (webpack:/webpack/bootstrap 1c41f11882ca3bf913fd:21:0)
    at Object.3 (C:\app\.next\server\bundles\pages\index.js:482:18)
    at __webpack_require__ (webpack:/webpack/bootstrap 1c41f11882ca3bf913fd:21:0)

Para solucionar este problema, en vez de importar la librería al inicio del componente,

componentDidMount() {
    require('particles.js');
    particlesJS.load('particles-js', "../static/config/particles.json");
  }

De este modo, la librería se va a importar solo del lado del cliente y ya no va a generar ningún tipo de error.