mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

Quentin Sommer def2ce7eda feat: Added react-useragent example (#5507 )

Add an example how to use `@quentin-sommer/react-useragent` with next.

I've been asked this https://github.com/quentin-sommer/react-useragent/issues/10 and plan to link this example as reference!

See readme for details

2018-10-23 23:33:41 +02:00

1.5 KiB

Raw Blame History

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.

1.5 KiB Raw Blame History