skydiver / nextjs-semantic

Next.js + Fomantic-UI + Styled Components

Notice

Since version 2.0.0 (of this package), Semantic UI was replaced by Fomantic-UI.

Current Versions

• Next.js 12
• React 17
• Fomantic-UI 2.8
• Styled Components 5.3

Setup

1. clone repo
2. npm install
3. npm run semantic:build
4. npm run dev

Semantic UI React

• Installed and used by default.
• Using React components is recommended.
• Read docs: https://react.semantic-ui.com/

Semantic UI

• you can remove components to reduce css size on semantic.json
• .semantic folder includes source file, from here it's possible to customize default theme
• change default Google font (Lato) on .semantic/src/themes/default/globals/site.variables
• run npm run semantic:watch to watch for changes while customizing theme

Why switching to Fomantic-UI?

Here are some reasons for the change:

• Semantic UI requires Node 10
• Fomantic-UI is actively developed
• Adds more components
• Fixes several security vulnerabilities

If you still want to use Semantic UI, get release 1.1.0

Deploy with Vercel

nextjs-semantic's Issues

Error: Cannot find module 'inquirer'

npm run semantic:build leads to Error: Cannot find module 'inquirer'

npm i inquirer -D fixes problem

Thank you for awesome template!

Change Font

Hi, I'm using your boilerplate to build my own project and I'm stuck on changing the font name, could you help me!

Consider calling this nextjs-fomantic instead of nextjs-semantic

This is just a suggestion. Why not name this as nextjs-fomantic? Spend some time double checking if this is actually fomantic. I ignored this library a couple of times while trying to search for a starter project.

Icons not working

Brand new installation and one that is about 2 weeks old have issues displaying icons.

Followed README

1. clone repo
2. npm install
3. npm run semantic:build
4. npm run dev

Then just add
import { Icon } from "semantic-ui-react";

Then on the return

<Icon name="users" />

Icon does not show. I tried with many other icons.

icons not displaying (only displaying as squares)

I'm trying to use the Icon component but when using it the icon is not displaying, just a blank square.

Icon not loaded

Hi,

After update version my icon (icons.woff2) not loaded.

Before
{
"name": "nextjs-semantic",
"description": "Next.js + Semantic UI + Styled Components",
"version": "2.0.0",
"author": "Martín M.",
"license": "MIT",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"now-build": "npm run semantic:build && next build",
"semantic:build": "cd .semantic && gulp build-css build-assets",
"semantic:watch": "cd .semantic && npm run semantic:build && gulp watch",
"lint": "eslint .",
"lint:fix": "eslint . --fix"
},
"dependencies": {
"@zeit/next-css": "^1.0.1",
"dotenv": "^8.2.0",
"es6-promise": "^4.2.8",
"isomorphic-fetch": "^2.2.1",
"js-sha256": "^0.9.0",
"next": "^9.0.3",
"next-compose-plugins": "^2.2.0",
"react": "^16.8.6",
"react-datepicker": "^2.10.1",
"react-dom": "^16.8.6",
"react-number-format": "^4.3.1",
"semantic-ui-react": "^0.87.3",
"styled-components": "^4.3.2"
},
"devDependencies": {
"babel-eslint": "^10.0.2",
"eslint": "^6.1.0",
"eslint-config-airbnb": "^17.1.1",
"eslint-config-prettier": "^6.0.0",
"eslint-config-wesbos": "0.0.19",
"eslint-plugin-html": "^6.0.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "^4.1.0",
"fomantic-ui": "^2.7.7",
"prettier": "^1.18.2",
"url-loader": "^2.1.0"
}
}

After
{
"name": "nextjs-semantic",
"description": "Next.js + Semantic UI + Styled Components",
"version": "2.0.0",
"author": "Martín M.",
"license": "MIT",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"now-build": "npm run semantic:build && next build",
"semantic:build": "cd .semantic && gulp build-css build-assets",
"semantic:watch": "cd .semantic && npm run semantic:build && gulp watch",
"lint": "eslint .",
"lint:fix": "eslint . --fix"
},
"dependencies": {
"@zeit/next-css": "^1.0.1",
"dotenv": "^8.2.0",
"es6-promise": "^4.2.8",
"isomorphic-fetch": "^2.2.1",
"js-sha256": "^0.9.0",
"next": "^9.1.6",
"next-compose-plugins": "^2.2.0",
"react": "^16.12.0",
"react-datepicker": "^2.10.1",
"react-dom": "^16.12.0",
"react-number-format": "^4.3.1",
"semantic-ui-react": "^0.88.2",
"styled-components": "^4.4.1"
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.9.0",
"eslint-config-wesbos": "0.0.19",
"eslint-plugin-html": "^6.0.0",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-react-hooks": "^2.3.0",
"file-loader": "^5.0.2",
"fomantic-ui": "^2.8.3",
"prettier": "^1.19.1",
"url-loader": "^3.0.0"
}
}

Thank you

Cannot Export

Already fix, sorry 🙏

npm run build-semantic does not exist

see title above.

I'm trying to watch for changes, for now I'm working around this by using npm run semantic:build before running npm run dev

How do you add global fonts to this

It seems when I use styled components (first time using it) it uses the BOLD type of fonts instead of regular.

  const heroText = {
    marginTop: "60px",
    fontSize: "70pt",
    color: "white",
    fontFamily: "Montserrat"
  };

Same as your example