From bd367022ae848ed5e5501ef9b432932183fdeb0c Mon Sep 17 00:00:00 2001 From: Guillermo Rauch Date: Sun, 13 Nov 2016 15:43:34 -0800 Subject: [PATCH] Created Global styles and layouts (markdown) --- Global-styles-and-layouts.md | 116 +++++++++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 Global-styles-and-layouts.md diff --git a/Global-styles-and-layouts.md b/Global-styles-and-layouts.md new file mode 100644 index 0000000..a5cc20d --- /dev/null +++ b/Global-styles-and-layouts.md @@ -0,0 +1,116 @@ +This page will answer: +- How to configure typefaces +- How to set global styles like + - Your page's background color + - Your global font size and family configuration + +The easiest way to accomplish it is by using the [`` component](https://github.com/zeit/next.js#head-side-effects). For example, in `pages/index.js`: + +```jsx +import React from 'react' +import Head from 'next/head' +export default () => ( + + + +) +``` + +Now, how do you do this for every page? In Next.js there's no concept of "global layout". Every page in your Next.js project is _complete_ and _self-sufficient_. + +If you've used WordPress in the past, it's similar to how every core template page has to invoke `get_header` and `get_footer`. + +So, the easiest solution is to have your pages invoke custom header and footer components. + +```jsx +import React from 'react' +import Header from '../components/header' +import Header from '../components/footer' +export default () => ( +
+
+

hi there

+
+
+) +``` + +For that example, your directory structure would look like: + +``` +components/ + header.js + footer.js +pages/ + index.js +``` + +Notice that `components/` is completely arbitrary, but I happen to like that strucutre. Then `components/header.js` can introduce the `` ` + + +) +``` + +It's also possible to create "master layouts" that embed these components on your behalf, by leveraging React's `children` property. + +For example, you can introduce `layouts/main.js`: + +``` +components/ + header.js + footer.js +pages/ + index.js +layouts/ + main.js +``` + +and the component can act as a wrapper: + +```jsx +import React from 'react' +import Header from '../components/header' +import Header from '../components/footer' +export default ({ children }) => ( +
+
+ { children } +
+
+) +``` + +with this in place, your resulting `pages/index.js` can look as follows: + +```jsx +import React from 'react' +import Page from '../layouts/main' +export default () => ( + +

my page with global styles!

+ +) +``` + +Some notes: +- JSX escaping can sometimes get in the way of your `