mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
1475491568
I tried to make the example a bit more descriptive. I changed `publicPath` in `now.config.js` to be `/_next/static/`, in place of `./`, and `outputPath` to `static/` in place of `static/css/`. The reason is that the webpack config will still fallback to `file-loader` for any content that is imported by the user and which is bigger that `8192` bytes. I think this content should not land in the css folder, which should probably stay css specific. Moreover, for user content, like regular images, the former settings will fail. If you have this: ```javascript import LargeFile from './LargeFile.png' ``` it would be placed in `static/css/` but its url would resolve to `<base-url>/LargeFile.png`, which will fail. It works for semantic-ui alone, because `@zeit/next-css` will put the styles in `static/css/` and so `publicPath` of `./` would work just fine. Putting assets in `static/` and setting `publicPath` to '/_next/static/' will resolve correctly for both semantic-ui related assets as well as for regular user assets. I hope I am not mixing something up. I tested it locally and in serverless deployment, and this looks pretty consistent. |
||
|---|---|---|
| .. | ||
| pages | ||
| .nowignore | ||
| next.config.js | ||
| now.json | ||
| package.json | ||
| README.md | ||
Semantic UI example
How to use
Using create-next-app
Execute create-next-app with Yarn or npx to bootstrap the example:
npx create-next-app --example with-semantic-ui with-semantic-ui-app
# or
yarn create next-app --example with-semantic-ui with-semantic-ui-app
Download manually
Download the example:
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-semantic-ui
cd with-semantic-ui
Install it and run:
npm install
npm run dev
# or
yarn
yarn dev
Deploy it to the cloud with now (download)
now
The idea behind the example
This example shows how to use Next.js along with Semantic UI React including handling of external styles and assets. This is intended to show the integration of this UI toolkit with the Framework.