mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
7e12997af6
I wrote a [script](https://github.com/j0lv3r4/dependency-version-updater) to update dependencies recursively in `package.json` files, e.g.: ``` $ node index.js --path="./examples" --dependencies="react=^16.7.0,react-dom=^16.7.0" ``` This PR contains the result against the examples folder. |
||
|---|---|---|
| .. | ||
| pages | ||
| package.json | ||
| README.md | ||
react-useragent example
Show how to setup @quentin-sommer/react-useragent using next.js client side and server side rendering.
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-react-useragent with-react-useragent-app
# or
yarn create next-app --example with-react-useragent with-react-useragent-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-react-useragent
cd with-react-useragent
Install it
npm install
npm run dev
# or
yarn
yarn dev
The idea behind the example
This example shows how to add user-agent awarness to your next.js app and set it up for server side rendering. It will enable you to directly detect the device from the server side.
You can then decide what to render depending on the device. For example:
- Smaller image for phones
- Dedicated download button fos iOS devices.
The example uses the pages/_app.js file to automatically injectuser-agent detection in all your pages.