Leonardo Fabian

Recently updated on marzo 18th, 2024 at 08:42 am

Semantic UI es un framework para crear el diseño de interfaces de manera responsive utilizando HTML/CSS legible.

Para instalarlo debemos seguir los siguientes pasos, tal como explica el sitio web oficial.

Opción 1: Package Manager

Abrimos una consola, nos dirigimos a la ruta de nuestro proyecto Nextjs y ejecutamos uno de los siguientes comandos:

$  yarn add semantic-ui-react semantic-ui-css
## Or NPM
$  npm install semantic-ui-react semantic-ui-css

En este tutorial estaré utilizando las siguientes dependencias:

{
  // ...
  "dependencies": {
    // ...
    "next": "14.1.3",
    "react": "^18",
    "react-dom": "^18",
    "semantic-ui-css": "^2.5.0",
    "semantic-ui-react": "^2.1.5"
  },
  // ...
}

Luego de la instalación, importamos el minified CSS…

Para eso copiamos el siguiente codigo:

import 'semantic-ui-css/semantic.min.css';

Nos dirigimos a nuestro archivo src/pages/_app.js y lo importamos:

import 'semantic-ui-css/semantic.min.css'
import "@/styles/globals.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Nos dirigimos a src/pages/index.js y probamos utilizando uno de sus componentes, en este caso probaremos con el componente Button:

import React from 'react'
import { Button } from 'semantic-ui-react'

export default function Index() {
  return (
    <div>
      <Button primary>Ver más</Button>
    </div>
  )
}

Guardamos y ejecutamos nuestra aplicación con el comando yarn dev

Listo! deberiamos poder ver un botón con las mismas caracteristicas del componente Button de Semantic UI.

En caso de visualizar un error en consola como el siguiente…

Solo tenemos que dirigirnos a la raiz de nuestro proyecto Nextjs, abrir el archivo next.config.mjs o next.config.js y reemplazar la siguiente linea:

const nextConfig = {
  reactStrictMode: true,
};

Por la siguiente linea:

const nextConfig = {
  reactStrictMode: false,
};