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

745 commits

Author SHA1 Message Date
Anton Moiseev e8a9472bcd Remove broken link from progressive-render example (#5552)
- Looks like no other example provides a link to a hosted demo
- There is the "Deploy to now" badge, so it can be deployed on demand when needed
- The link is broken anyway
- Probably any example hosted by an individual contributor sooner or later will be cleaned up, doesn't feel like a reliable way to provide a live demo
2018-10-30 11:35:41 +01:00
Anton Moiseev 58583a2b81 Examples: fix <title> warning in the TypeScript example (#5549)
* Replace _document.tsx example with _app.tsx

* Fix title

* Remove _app.tsx
2018-10-29 19:32:01 +01:00
Janek Rahrt a7b6ffa914 Fix ssr auth bug and dependency problems (#5543)
* fix graphql dep

* fix ssr auth bug

* fix linting issues
2018-10-28 13:13:28 -07: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
David Calhoun ba5f1b2c21 [change] Update react-native-web example (#5489)
Utilize ES modules, which are now the default export for
`react-native-web`.

_NOTE:_ [This example requires `next@^7.0.0`](https://bit.ly/2PaEhao).
2018-10-22 22:32:24 +02:00
Christopher Lee 98eb710189 removed deprecated useBuiltIns from .babelrc (#5486) 2018-10-20 21:09:03 +02:00
ultrox 2ce3f39585 fix(examples/with-react-intl): Bug when accept-language is anything other then 'en' (#5488)
package accept returns false if can't find language in offered list of languages, then later on
bool is attempted to be split, and app crashes in prod & dev
2018-10-20 20:11:59 +02:00
Tim Neutkens e8c73b45fa Run yarn lint —fix 2018-10-20 19:37:42 +02:00
Henrik Wenz 18488f47b0 Fix linter (#5350)
* Fix linter

* Add test env

* Fix lint errors
2018-10-20 17:00:01 +02:00
Anthony Cerbic 4be4452fd8 Add cloud9 (c9.io) to examples (#5448) 2018-10-20 16:58:21 +02:00
komkanit 3e72da686f upgrade react-native-web to fix bug (#5459) 2018-10-20 16:58:03 +02:00
zsx 5b6489ebf3 Fix the bug with not passing props to wrapped element of with-rematch example (#5483) 2018-10-20 14:31:26 +02:00
Seth Bergman f5156b2297 Fixed broken link (#5479)
Fixes link to 404 page in sentry docs
2018-10-19 14:52:41 +02:00
Jerome Fitzgerald 6eba3ad9ab 🐳️ multistage: remove devDependencies (#5477)
Docker Multistage
* Remove `devDependencies` from `./node_modules`
 in `builder` for faster copy on `base` init

* Added `isomorphic-unfetch` to show it not
 being copied over to `base`.

* `isomorphic-fetch` will still show from `next`
2018-10-19 00:36:04 +02:00
Gerhard Preuss 9634bad79d Remove note on OSS/non-OSS issue (#5474)
I successfully deployed this example with `now` and `now --public` (I am on premium plan).
Did this before deploy

```sh
$ cp Dockerfile.multistage Dockerfile
```
2018-10-18 11:14:17 +02:00
Zach Curtis 829f4e581c Fixed auth token not getting refreshed on client cache reset (#5471) 2018-10-17 16:52:29 +02:00
Luc 6f80581adc Update styled-components to v4 (#5458) 2018-10-16 12:03:25 +02:00
Iurii Kucherov 619ba00001 Fix typos on comments (#5457)
Hello,

Here is a small PR to fix some typos on the comments.
2018-10-16 01:25:16 +02:00
Jan Czizikow 9d50f8afb5 Update using emotion - fixes: Warning: <title> should not be used in _document.js's <Head> (#5454) 2018-10-15 17:02:19 +02:00
Don Alvarez af9214b302 mobx-state-tree examples should use _app (#5362)
The mobx-state-tree examples (with and without typescript) pre-dated the next _app class and needed to be updated to use _app for persisting state across client-side navigation transitions. Also removed unneeded custom server class to better keep with the "show one feature per example" style of the next examples folder
2018-10-14 10:04:58 +02:00
zsx 1b8bfc70f3 Fix the bug with creating duplicate components of with-rematch example (#5440) 2018-10-12 16:16:52 +02:00
Rafael Almeida 449dd29da0 Update with-react-i18next example to use react-i18next@8.0.6 (#5368)
Fixes #5352 . This updates the example updating react-i18next to v8.0.6, replacing the `translate` HOC to `withNamespaces` and `I18n` to `NamespacesConsumer`.

There is one thing that I am not sure if is correct or not so I need some guidance. You gotta wrap the page with the `withI18next` HOC so it will extend the `getInitialProps` of the page with this:

```
Extended.getInitialProps = async (ctx) => {
  const composedInitialProps = ComposedComponent.getInitialProps
    ? await ComposedComponent.getInitialProps(ctx)
    : {}

  const i18nInitialProps = ctx.req
    ? i18n.getInitialProps(ctx.req, namespaces)
    : {}

  return {
    ...composedInitialProps,
    ...i18nInitialProps
  }
}
```

The problem lies in `i18n.getInitialProps` that has this code:

```
i18n.getInitialProps = (req, namespaces) => {
  if (!namespaces) namespaces = i18n.options.defaultNS
  if (typeof namespaces === 'string') namespaces = [namespaces]

  req.i18n.toJSON = () => null // do not serialize i18next instance and send to client

  const initialI18nStore = {}
  req.i18n.languages.forEach((l) => {
    initialI18nStore[l] = {}
    namespaces.forEach((ns) => {
      initialI18nStore[l][ns] = (req.i18n.services.resourceStore.data[l] || {})[ns] || {}
    })
  })

  return {
    i18n: req.i18n, // use the instance on req - fixed language on request (avoid issues in race conditions with lngs of different users)
    initialI18nStore,
    initialLanguage: req.i18n.language
  }
}
```

In my understanding, among other things, it gets the `i18n` object from the request (included by the `server.js`) and uses the data to create `initialI18nStore` and `initialLanguage`, and then return these two objects plus the `i18n` object itself. If you add the `i18n` object on the return, then there will be a crash on the client-side render of the page:

```TypeError: Cannot read property 'ready' of null```

I don't know why, but returning it breaks `NamespacesConsumer` component from `react-i18next` (the state becomes null). So I commented this line and the provider on `_app.js` is getting the `i18n` instance from the `i18n.js` file (the same as `server.js`). I don't know if this would be an issue so I would like help to debug this.
2018-10-11 16:20:01 +02:00
Luc e174304639 Remove examples/.babelrc (#5415)
* fix relative path in examples/.babelrc

* remove examples/.babelrc

* remove examples/.gitignore
2018-10-10 09:52:48 +02:00
Kenneth Luján Rosas 6dcc9bd59a feat: add dynamic layouts with _app.js example (#5420)
Regarding a question about having different global layouts via `_app.js` usage, it came up that we could use a static property in the page that needed a different one(Thanks @timneutkens )

Link to the Spectrum post: https://spectrum.chat/?t=af6ca794-5420-4780-abd8-96f085a19e09

This PR adds an example called `with-dynamic-app-layout`, that showcases that use case in the simplest way I could think of.

Let me know if there's changes or improvements to be made. 🎉
2018-10-10 09:49:22 +02:00
Duncan L d141b95603 Examples: Update with-typescript Example Packages (#5410)
Update packages for with-typescript example
2018-10-09 12:48:27 +02:00
Duncan L 6d5389ef2d Examples: Update custom-server-typescript examples packages (#5411) 2018-10-09 12:48:05 +02:00
Duncan L 5fbca72ea2 Examples: Update with-redux-observable example packages (#5412) 2018-10-09 12:47:26 +02:00
Luc 91b21f9514 Update with-jest example .babelrc config (#5414)
* simplify babelrc

* simplify "test" script

* update dependencies
2018-10-09 12:45:51 +02:00
Romello Goodman fad1265d17 Upgrading the styled component packages (#5390)
Upgrading the styled-components and babel styled components packages!
2018-10-07 15:32:31 +02:00
Logan McAnsh f3c65fd417 update polka example (#5370)
[polka](https://github.com/lukeed/polka/releases/tag/v0.5.0) changed their listen api to be more like express like
2018-10-07 15:00:44 +02:00
Supakorn Thongtra fef6026ad9 <title> should not be used in _document.js's (#5379)
* <title> should not be used in _document.js's

* fix style as it was
2018-10-05 23:53:52 +02:00
Carlos 334b46e8d9 Add analyze bundles example (#5332)
* Add analyze-bundles example

* housekeeping: with-webpack-bundle-analyzer example

* analyze-bundles example: revert the version of faker library

* analyze-bundles add analyze:server and analyze:browser to scripts

* with-webpack-bundle-analyzer example: fix typo
2018-10-01 01:24:27 +02:00
Carlos 565b026e7b Added with-ts-node with Next js 7 example (#5204)
### Next js 7+ and Typescript 3+ Example

No babel, tsc, pure typescript usage
Made by [next-with-typescript plugin](https://github.com/echoulen/next-with-typescript)
2018-09-28 21:18:50 +02:00
Mert Can 2c6206d66c Package.json comma removed (#5322) 2018-09-28 15:37:19 +02:00
Yuri Yakovlev ad93ff4b3e Remove transform-decorators plugin & Bump deps (#5232) 2018-09-27 23:42:06 +02:00
Henrik Wenz f0f8229009 Update with-mobx-state-tree-typescript example (#5266)
To work with babel7 & next7.
2018-09-27 16:39:11 +02:00
Arek Mytych 5c9c7b877b Add language switch to with-react-i18next example (#5306) 2018-09-27 13:49:33 +02:00
Resi Respati 397daece42 with-typescript example updates (#5267)
* [with-typescript] Updated `@zeit/next-typescript` and typescript typings

* [with-typescript] Updated tsconfig to match new recommended config

* [with-typescript] upgraded dependencies, implement type-checking

* [with-typescript] add _document example, fixed tsconfig

* [with-typescript] updated README

* [with-typescript] updated example contents

* [with-typescript] adopt the Layout component from Flow example
2018-09-26 09:58:36 +02:00
Matthew Francis Brunetti 7961946c07 withApollo example - move from old HOC APIs to new function-as-child APIs (#5241)
Since version 2.1, react-apollo is exposing some new components that use the function-as-child (or render-prop) pattern to let you connect apollo-client magic with your components. See the blog article: [New in React Apollo 2.1](https://www.apollographql.com/docs/react/react-apollo-migration.html)

If I'm not mistaken, it's generally agreed that this pattern is (where it works) superior to the HOC pattern, for reasons that are best explained here: https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce 

So I updated the with-apollo example to use the new API, and IMO this code is much simpler and natural to read and understand, especially if you are not already familiar with Apollo's HOC APIs.

I broke up my changes into separate commits, for easier review. Commits with "Refactor" in the message accomplish the goal of switching to the new APIs while minimizing line-by-line differences (select "Hide whitespace changes" under "Diff settings"). Commits with "Clean up" in the message follow up the refactoring with trivial things like reorganizing code sections, renaming variables, etc.

For the components doing mutations, I chose not to use the `Mutation` component, since that doesn't really make sense to me; a mutation is something that happens at a point in time, so it's not meaningful to represent a mutation in the markup, which exists for a period of time. All that component does is expose a `mutate` function for a single specified mutation, and `result` data for a single firing of the mutation (which we don't need anyways; apollo handles updating the local data with the result). To me it seems simpler and more flexible to just get the apollo client via `ApolloConsumer` and call `.mutate()` on it. 

In case anyone is interested, here's what my version of `PostUpvoter` using the `Mutation` component looked like:

 <details>

```jsx
import React from 'react'
import { Mutation } from 'react-apollo'
import { gql } from 'apollo-boost'

export default function PostUpvoter ({ votes, id }) {
  return (
    <Mutation mutation={upvotePost}>
      {mutate => (
        <button onClick={() => upvote(id, votes + 1, mutate)}>
          {votes}
          <style jsx>{`
            button {
              background-color: transparent;
              border: 1px solid #e4e4e4;
              color: #000;
            }
            button:active {
              background-color: transparent;
            }
            button:before {
              align-self: center;
              border-color: transparent transparent #000000 transparent;
              border-style: solid;
              border-width: 0 4px 6px 4px;
              content: '';
              height: 0;
              margin-right: 5px;
              width: 0;
            }
          `}</style>
        </button>
      )}
    </Mutation>
  )
}

const upvotePost = gql`
  mutation updatePost($id: ID!, $votes: Int) {
    updatePost(id: $id, votes: $votes) {
      id
      __typename
      votes
    }
  }
`
function upvote (id, votes, mutate) {
  mutate({
    variables: { id, votes },
    optimisticResponse: {
      __typename: 'Mutation',
      updatePost: {
        __typename: 'Post',
        id,
        votes
      }
    }
  })
}
```

</details>

###

I'm happy with where things are at here, but I'm more than happy to address any comments, concerns, ideas for improvent!

Thanks!
2018-09-26 01:32:41 +02:00
Zack Tanner 9854c342e1 #5620: Fix react-i18next example to properly SSR (#5265)
This fixes https://github.com/zeit/next.js/issues/5260 by making sure that `index.js` has `getInitialProps` defined on the page exported component, not the child component.

When fixing that, I uncovered an issue where the server side rendered HTML did not match the clientside HTML, so I reworked _app.js to use the `i18nextprovider` component which has props to hydrate the initial data (for SSR), and makes sure the correct i18n instance is passed to all child components through context.

Before:
```html
<!DOCTYPE html>
<html>
   <head>
      <meta charSet="utf-8" class="next-head"/>
      <link rel="preload" href="/_next/static/development/pages/index.js" as="script"/>
      <link rel="preload" href="/_next/static/development/pages/_app.js" as="script"/>
      <link rel="preload" href="/_next/static/development/pages/_error.js" as="script"/>
      <link rel="preload" href="/_next/static/runtime/webpack.js" as="script"/>
      <link rel="preload" href="/_next/static/runtime/main.js" as="script"/>
   </head>
   <body>
      <div id="__next"></div>
      <script src="/_next/static/development/dll/dll_4a2ab6ce0cb456fbfead.js"></script><script>__NEXT_DATA__ = {"props":{"pageProps":{}},"page":"/","pathname":"/","query":{},"buildId":"development"};__NEXT_LOADED_PAGES__=[];__NEXT_REGISTER_PAGE=function(r,f){__NEXT_LOADED_PAGES__.push([r, f])}</script><script async="" id="__NEXT_PAGE__/" src="/_next/static/development/pages/index.js"></script><script async="" id="__NEXT_PAGE__/_app" src="/_next/static/development/pages/_app.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/_next/static/development/pages/_error.js"></script><script src="/_next/static/runtime/webpack.js" async=""></script><script src="/_next/static/runtime/main.js" async=""></script>
   </body>
</html>
```

After: 
```html
<!DOCTYPE html>
<html>
   <head>
      <meta charSet="utf-8" class="next-head"/>
      <link rel="preload" href="/_next/static/development/pages/index.js" as="script"/>
      <link rel="preload" href="/_next/static/development/pages/_app.js" as="script"/>
      <link rel="preload" href="/_next/static/development/pages/_error.js" as="script"/>
      <link rel="preload" href="/_next/static/runtime/webpack.js" as="script"/>
      <link rel="preload" href="/_next/static/runtime/main.js" as="script"/>
   </head>
   <body>
      <div id="__next">
         <h1>This example integrates react-i18next for simple internationalization.</h1>
         <div>
            <h1>welcome to next.js</h1>
            <p>This example integrates react-i18next for simple internationalization.</p>
            <p>test words for en</p>
            <div><button>fire in the wind for en</button></div>
            <p>You can either pass t function to child components.</p>
            <p>Or wrap your component using the translate hoc provided by react-i18next.</p>
            <p>Alternatively, you can use <code>Trans</code> component.</p>
            <a href="/page2">Go to page 2</a><br/><a href="/page3">Go to page 3 (no hoc)</a>
         </div>
      </div>
      <script src="/_next/static/development/dll/dll_4a2ab6ce0cb456fbfead.js"></script><script>__NEXT_DATA__ = {"props":{"pageProps":{"i18n":null,"initialI18nStore":{"en":{"home":{"welcome":"welcome to next.js","sample_test":"test words for en","sample_button":"fire in the wind for en","link":{"gotoPage2":"Go to page 2","gotoPage3":"Go to page 3 (no hoc)"}},"common":{"integrates_react-i18next":"This example integrates react-i18next for simple internationalization.","pureComponent":"You can either pass t function to child components.","extendedComponent":"Or wrap your component using the translate hoc provided by react-i18next.","transComponent":"Alternatively, you can use \u003c1\u003eTrans\u003c/1\u003e component."}}},"initialLanguage":"en-US"}},"page":"/","pathname":"/","query":{},"buildId":"development"};__NEXT_LOADED_PAGES__=[];__NEXT_REGISTER_PAGE=function(r,f){__NEXT_LOADED_PAGES__.push([r, f])}</script><script async="" id="__NEXT_PAGE__/" src="/_next/static/development/pages/index.js"></script><script async="" id="__NEXT_PAGE__/_app" src="/_next/static/development/pages/_app.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/_next/static/development/pages/_error.js"></script><script src="/_next/static/runtime/webpack.js" async=""></script><script src="/_next/static/runtime/main.js" async=""></script>
   </body>
</html>
```
2018-09-24 12:13:38 +02:00
John Leon ce8b301f24 Fix for with-ant-design-less for next7.0 (#5263)
* Update .babelrc

babel-plugin-transform-decorators-legacy does not exist in babel 7 in replace use @babel/plugin-proposal-decorators

* Update package.json

Acording the last commit please,  test this example , will be work .
2018-09-24 00:03:38 +02:00
Adam Lane 3bb62928a6 example with-sentry note that server side logging available too (#5261)
Trivial note to remind anyone doing sentry that they should consider doing server side logging too.
2018-09-23 21:06:05 +02:00
Adam Lane 48d54c254f example with-apollo note that two render executions are expected (#5262)
Noting per https://github.com/zeit/next.js/issues/5050 for new users of Apollo that they should not be concerned about multiple renders.
2018-09-23 21:05:00 +02:00
Henrik Wenz 80a6160caf Update with-dynamic-import example (#5201)
Follow up on: https://github.com/zeit/next.js/pull/4639
2018-09-23 16:01:54 +02:00
Henrik Wenz 60b1d26f1f Update with-kea example (#5259)
- updates transform-decorators-legacy
- updates with-next-redux-wrapper
2018-09-23 16:01:37 +02:00
Henrik Wenz dc3be63ad2 Fix with-mobx-state-tree example (#5258) 2018-09-22 22:21:54 +02:00
Henrik Wenz 2c0ff4b925 Fix failing linter tests (#5257)
Wonder how that one got through 🤔
2018-09-22 21:41:07 +02:00
Arek Mytych 5276734535 Update to use @sentry/browser, remove raven-js (#5253) 2018-09-22 14:22:24 +02:00
Muhaimin CS e892898dfe Update with-redux-code-splitting example (patch) (#5252) 2018-09-22 14:14:40 +02:00
Arek Mytych 2304300d68 Update GrpahQL dependencies (#5242)
Fixes the example with next.js@7

Fixes #5238
2018-09-21 11:49:24 +02:00