* Update all dependencies and remove redundant ones from package.json. (60f9ee5)
* Fixes#5596 by adjusting nodemon scripts (d4b7d3a)
* Fixes `npm start` on windows by using `cross-env` (9555217)
* Move compiled server out from `.next`. Compiling other JS into `.next` seems incorrect. (79fce02,
9ce7086)
* Partly fixes#5753 by making sure typescript compiles with `es2017` as target, at least ensuring code is runnable on node 8. Previously it was compiled with `esnext`. (9176e92)
---
I tried improving the structure by keeping source in `src/app` and `src/server` and then building to `dist/server` and `dist/app` but I didn't really get it to work and made most configs more complicated. Moved the built server out from `.next` anyway.
The `initialNow` prop is used to avoid content mismatches when Universal/SSR apps render date values using components like `<FormattedRelative>`.
If this value is created in `render()`, then the server will generate it and then the client will also generate it during hydration / initial render, resulting in two different values and content mismatches like:
> Warning: Text content did not match. Server: "in 1,741,545 seconds" Client: "in 1,741,543 seconds"
If the value is instead generated in `getInitialProps`, then the client's initial rendering will match because it will use the same value sent down by the server.
There were several issues with the example [examples/with-firebase-hosting-and-typescript](https://github.com/zeit/next.js/tree/canary/examples/with-firebase-hosting-and-typescript)
* `npm run serve`
* Has no `pre` task that actually builds the app. Requires manual running of all build scripts.
* Will choke on windows because trying to set environment variables with `NODE_ENV=production`
* Outdated Typescript and Tslint
* Not being able to deploy because `firebase-tools` being of a deprecated version.
* Structure, which I understand is based on `firebase-tools` generation, is confising with `src/functions/src` being generally bad structuring.
I remedied this and also improved some other factors:
* Remove dependency `prettier` as it is unused (f4d6f54)
* Upgrade all dependencies (09a9193)
* Use upgraded firebase dependencies to deploy to node 8 environment (87e1e09, 7d8055b)
* Remove deprecated tslint rule `no-unused-variable` (9392162)
* Flattened filestructure in `src/functions` (097a25a)
* Use ES import when importing next (6c99adb)
* Fixed incorrect name and added somewhat to the description in package.json.
`with-firebase-hosting` → `with-firebase-hosting-and-typescript` (1ffa0b5)
* Fixed `serve` script by building before running, using [`cross-env`](https://www.npmjs.com/package/cross-env) to set environment variables and remove unecessary flag. (3a1e221, 422ccee, 8811e44)
* Add `.firebase` cache to `.gitignore` (4d7cbe4)
* Add `-C` (clean) flag when copying dependency files `copy-deps` (0826708)
* Use `strict: true` in the functions tsconfig (229b04f)
This was tested by running serve on windows and linx(WSL) and deploy on linux(WSL)
---
This is based on #5819 but correctly based from `canary`
Hello!
I was looking at the [`with-firebase-hosting`](/zeit/next.js/tree/canary/examples/with-firebase-hosting) example and was having some various issues running it:
* `npm run serve` will choke on windows because trying to set enviroment variables with `NODE_ENV=production`
* `npm run build-funcs` failing because of babeljs mismatches between `@babel/cli@^7.0.0-rc.1` and `next@^6.0.3`
* Not being able to deploy because `firebase-tools` being a deprecated version.
I remedied this and also improved some other factors:
* Use standard JSON formatting on `package.json` so that `npm install` doesn't cause changes on every run. (a83e930)
* Remove "prettier" as a devDependency as there is no use of it in the example and most other examples does not have it as a dependency. (6095663)
* Update all dependencies. The simple usecase in this example didn't really require any changes to the code. (ccde086)
* [`firebase-admin@6`](https://github.com/firebase/firebase-admin-node/releases/tag/v6.0.0)
* [`firebase-functions@2`](https://github.com/firebase/firebase-functions/releases/tag/v2.0.0)
* [`firebase-tools@4`](https://github.com/firebase/firebase-tools/releases/tag/v4.0.0)
* [`firebase-tools@5`](https://github.com/firebase/firebase-tools/releases/tag/v5.0.0)
* [`firebase-tools@6`](https://github.com/firebase/firebase-tools/releases/tag/v6.0.0)
* Make `npm run serve` runnable on windows using [`cross-env`](https://www.npmjs.com/package/cross-env). (b20dda7)
* Update `.gitignore` to ignore firebase cache (bf761b7)
* Remove `src/app/.babelrc` that seems to have been added as a previous bugfix but doesn't seem to do anything currently. (1b02045)
* Remove point from [`README.md`](https://github.com/zeit/next.js/blob/canary/examples/with-firebase-hosting/README.md) that was mentioning any `predeploy` hooks in `firebase.json` as they were removed in 4f4b7a1bce. (5636d9f)
* Use the possibility added by upgrading `firebase-tools` to [`>=4.0.0`](https://github.com/firebase/firebase-tools/releases/tag/v4.0.0) and `firebase-functions` to [`>=2.0.0`](https://github.com/firebase/firebase-functions/releases/tag/v2.0.0) to make the deployable functions use node 8 rather than node 6. Also make babel compile with node 8 as target for less polyfills etc. (c954cc2)
* Added comment to [`README.md`](https://github.com/zeit/next.js/blob/canary/examples/with-firebase-hosting/README.md) explaining how firebase deploys to node 8 and that babel will compile code for node 8. (d8b2e65, 91953dc)
This was tested to `serve` on windows, linux(WSL) and on mac. Deploy was tested on linux(WSL) and mac.
---
This PR is a based on #5806 with correct base.
---
🔔 @jthegedus @timneutkens
Google seems to be deprecated the legacy realtime database and moving towards default use of Firestore, although it's still officially in beta. This PR migrates towards Firestore and the recommended loading methods for the Firebase 5.6.0 libraries. Note: the Firebase and Firebase-Admin dependencies should be updated to 5.6.0 and 6.3.0 respectively.
Hey @timneutkens I've updated this example a bit.
- Fixed `/asserts` spelling to `/assets`.
- Removed the `/assets/styles.less` as importing this caused the entire ant-design css sheet to be loaded, now only the React components imported will have their styles loaded via the babel plugin which was already configured. Resulted in dropping the CSS for this example from ~630kb to ~220kb.
- Removed `index.js` as it's not needed.
* Fix for locale.split is not a function.
Following from https://github.com/zeit/next.js/pull/5488
- Renamed languages to supportedLanguages
- Firstly, accept languages based on supportedLanguages
- And finally, accept a single language, if it returns false, the default of 'en' is used.
I looked at the navigator library, which is used by 'accept', this should be a more solid solution, since we can now know that `const locale` is always a string.
// Before (Sometimes returns an array as `const local`)
const locale = accept.language(languages) || 'en'
// After (Always returns a string)
const locale = accept.language(accept.languages(supportedLanguages)) || 'en';
* Update server.js
Update variable name.
In this example, we can:
- `QueryRenderer` SSR
- caching the data
- use the feature of `react-relay-network-modern` which is the powerful tool for `relay-modern`
I copy the example `with-relay-modern`, but I just modified the code. Some detail are not modified.
If you think this example is needed, I will fix those. Otherwise, close this **PR** to let me know this example is not needed.
- The with-firebase-auth example won't run unless a database with proper rules is created first.
- Add a small error callback to addDbListener to help with debugging if someone's database connection doesn't work.
On the server `props.initialMobxState` received by the `constructor` is a fully functioning mobx store that was instantiated by `getInitialProps()` only a few ticks earlier.
Thus, creating a new instance is unneccessary.
In the browser, however, `props.initialMobxState` is a hydrated plain object and thus the store needs to be initialized.
Current with-ant-design-less example has some problems.
- Upgrade next7, console found a 404 error.
> After upgrade next7, .next folder didn't find /static/style.css and there is /static/css/style.chunk.css.
- The /_next/static/style.css link don't need be placed in the <Head> tag. The style.chunk.css file will be add in the head tag automatically after build.
- The project with more pages include _app.js, _document.js...the antd-custom.less will not work well.
> The solution is use `modifyVars` of `lessLoaderOptions`. It work well in my project~
Instead of bundling `postcss-cli` we can now make use of `@zeit/with-css`.
This also means we can get rid of the `<style>` import and concurrent build step for css. 🎉
- use `enhanceApp` so that styled-components used in _app.js are server rendered
- call parent getInitialProps, fixes#5629
- return `styles`, making the render() method obsolete.
cc @mxstbr @probablyup
I spent far too much time fiddling with this example project before realizing it contained a bug in the store initialization logic and it was a bit more complex than it needed to be.
* The custom server was not needed
* The store-initialization did effectively the same thing twice for no reason
* And wrapping MyApp component in a HOC was wholly unnecessary indirection
My changes are split into four discrete commits for clarity.
* added example for using typings-for-css-modules-loader
* Update examples/with-typings-for-css-modules/README.md
* Update examples/with-typings-for-css-modules/README.md
* Update examples/with-typings-for-css-modules/next.config.js
- 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
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
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`
I successfully deployed this example with `now` and `now --public` (I am on premium plan).
Did this before deploy
```sh
$ cp Dockerfile.multistage Dockerfile
```
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
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.
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. 🎉
* 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
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!
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>
```
* 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 .
