rsnext/examples/head-elements/README.md

# Head elements example

## Deploy your own

Deploy the example using [ZEIT Now](https://zeit.co/now):

[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/head-elements)

## How to use

### Using `create-next-app`

Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example head-elements head-elements-app
# or
yarn create next-app --example head-elements head-elements-app
```

### Download manually

Download the example:

```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/head-elements
cd head-elements
```

Install it and run:

```bash
npm install
npm run dev
# or
yarn
yarn dev
```

Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):

```bash
now
```

## The idea behind the example

For every page you can inject elements into the page head. This way you can add stylesheets, JS scripts, meta tags, a custom title or whatever you think is convenient to add inside the `<head>` of your page.

This example shows in `pages/index.js` how to add a title and a couple of meta tags.
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 06:10:54 +01:00			`# Head elements example`

Add the deploy button to compatible examples (#9547) 2019-11-27 17:40:58 +01:00			`## Deploy your own`

			`Deploy the example using [ZEIT Now](https://zeit.co/now):`

			`[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/head-elements)`

Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 06:10:54 +01:00			`## How to use`

examples: add create-next-app (#3377) * examples: add create-next-app * fix with-typescript readme 2017-12-03 05:30:17 +01:00			### Using `create-next-app`

Replace the deprecated Create Next App URL (#9032) 2019-10-11 05:34:14 +02:00			Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
examples: add create-next-app (#3377) * examples: add create-next-app * fix with-typescript readme 2017-12-03 05:30:17 +01:00
Examples: use npx and yarn create to run create-next-app on examples (#4002) * remove global npm install of create-next-app * add npx to create-next-app command in examples * add bash to shell snippets * add yarn create to next-app command in examples * fix READMEs named with lowercase * change READMEs to use UPPERCASE 2018-03-14 09:09:46 +01:00			```bash
			`npx create-next-app --example head-elements head-elements-app`
			`# or`
			`yarn create next-app --example head-elements head-elements-app`
examples: add create-next-app (#3377) * examples: add create-next-app * fix with-typescript readme 2017-12-03 05:30:17 +01:00			```

			`### Download manually`

#4751 - Explicitly mention install when cloning examples (#4758) Preferably this installation wouldn't be necessary, but in lieu of a fix... #4751 2018-07-11 23:56:15 +02:00			`Download the example:`
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 06:10:54 +01:00
			```bash
Use canary for all example downloads (#3411) 2017-12-07 03:12:42 +01:00			`curl https://codeload.github.com/zeit/next.js/tar.gz/canary \| tar -xz --strip=2 next.js-canary/examples/head-elements`
examples: simplify download instruction 2016-12-22 10:07:54 +01:00			`cd head-elements`
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 06:10:54 +01:00			```

Add/data fetch example (#485) * Added data fetch example * Finished updating examples install instructions and added data-fetch example to main readme 2016-12-23 00:05:49 +01:00			`Install it and run:`
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 06:10:54 +01:00
			```bash
			`npm install`
Add/data fetch example (#485) * Added data fetch example * Finished updating examples install instructions and added data-fetch example to main readme 2016-12-23 00:05:49 +01:00			`npm run dev`
Examples: stabalise README format and create-next-app usage (#4009) * Examples: clarify language around Yarn create & npx * add missing READMEs and create-next-app usage * suggest people tag jthegedus in firebase related issues * add yarn alt instructions * cerebraljs example readme & fixes 2018-04-03 14:19:05 +02:00			`# or`
			`yarn`
			`yarn dev`
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 06:10:54 +01:00			```

Add the deploy button to compatible examples (#9547) 2019-11-27 17:40:58 +01:00			`Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):`
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 06:10:54 +01:00
			```bash
Add/data fetch example (#485) * Added data fetch example * Finished updating examples install instructions and added data-fetch example to main readme 2016-12-23 00:05:49 +01:00			`now`
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 06:10:54 +01:00			```

			`## The idea behind the example`

			For every page you can inject elements into the page head. This way you can add stylesheets, JS scripts, meta tags, a custom title or whatever you think is convenient to add inside the `<head>` of your page.

			This example shows in `pages/index.js` how to add a title and a couple of meta tags.