├── .babelrc
├── .gitignore
├── README.md
├── components
├── Layout.css
└── Layout.js
├── next.config.js
├── package.json
├── pages
├── global.css
├── index.css
└── index.js
├── postcss.config.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": [
3 | [
4 | "wrap-in-js",
5 | {
6 | "extensions": ["css$"]
7 | }
8 | ]
9 | ],
10 | "presets": [
11 | "next/babel"
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .next
2 | node_modules
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/basic-css)
2 |
3 | # Basic CSS example
4 |
5 | ## How to use
6 |
7 | Download the example [or clone the repo](https://github.com/zeit/next.js):
8 |
9 | ```bash
10 | curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/basic-css
11 | cd basic-css
12 | ```
13 |
14 | Install it and run:
15 |
16 | ```bash
17 | npm install
18 | npm run dev
19 | ```
20 |
21 | Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
22 |
23 | ```bash
24 | now
25 | ```
26 |
27 | ## The idea behind the example
28 |
29 | Next.js ships with [styled-jsx](https://github.com/zeit/styled-jsx) allowing you
30 | to write scope styled components with full css support. This is important for
31 | the modularity and code size of your bundles and also for the learning curve of the framework. If you know css you can write styled-jsx right away.
32 |
--------------------------------------------------------------------------------
/components/Layout.css:
--------------------------------------------------------------------------------
1 | .container {
2 | background: blue;
3 | }
4 |
5 | .header {
6 | background: yellow;
7 | }
8 |
9 | .footer {
10 | background: pink;
11 | }
12 |
--------------------------------------------------------------------------------
/components/Layout.js:
--------------------------------------------------------------------------------
1 | import stylesheet from "./Layout.css";
2 |
3 | export default ({ children }) =>
4 |
5 |
Header
6 | {children}
7 |
Footer
8 |
9 |