I've just thought of a way to improve the initial props page by adding
an example for a list/detail page structure. To do that, I've created a
separate `/detail` page, and a mock API which calls data from the array
we made on the previous PR.
A ListDetail component is created as an example for displaying detail.
Page structure is also cleaned up. Should I go ahead and add an example
on how to style with styled-jsx + its TS declarations? I might decide to
do it within this week anyway.
Update examples with-relay-modern and with-relay-modern-server-express to react-relay 2.0.0
- react-relay has started to use new Context API instead of Legacy Context API
- add `parseInt` because graphql 14.0.0 introduced stricter scalar value coercion
Closes#6157
This reverts the changes made in [this pr](https://github.com/zeit/next.js/pull/6109).
`redux-saga: "1.0.0"` changed the way it handles it's queues. Because of that we're still having trouble to implement the synchronous side-effects flow in `next-redux-saga`. See [this discussion](https://github.com/bbortt/next-redux-saga/pull/1) for more information.
Therefore I would feel more comfortable not to mislead users by giving them a non-working example in the main branch.
I tried to make the example a bit more descriptive. I changed `publicPath` in `now.config.js` to be `/_next/static/`, in place of `./`, and `outputPath` to `static/` in place of `static/css/`. The reason is that the webpack config will still fallback to `file-loader` for any content that is imported by the user and which is bigger that `8192` bytes. I think this content should not land in the css folder, which should probably stay css specific.
Moreover, for user content, like regular images, the former settings will fail.
If you have this:
```javascript
import LargeFile from './LargeFile.png'
```
it would be placed in `static/css/` but its url would resolve to `<base-url>/LargeFile.png`, which will fail. It works for semantic-ui alone, because `@zeit/next-css` will put the styles in `static/css/` and so `publicPath` of `./` would work just fine.
Putting assets in `static/` and setting `publicPath` to '/_next/static/' will resolve correctly for both semantic-ui related assets as well as for regular user assets.
I hope I am not mixing something up. I tested it locally and in serverless deployment, and this looks pretty consistent.
Hi there
I noticed you have not yet included the api breaking changes in `"redux-saga": "1.0.0"`. Therefore I felt free to upgrade the dependencies in `examples/with-redux-saga`.
I do not know anything about apollo nor graphql, that is why I did not upgrade `examples/with-apollo-and-redux-saga`. But, I think you should do this on occasion.
Keep the great work up.
Regards
I've updated the TypeScript dependency to the latest version. Also
removed some dependencies that may not be needed.
I've also fixed tslint errors which may have appeared because of
previous updates to this starter kit, as well as added comments
to explain some parts of the code.
The current `examples/with-typescript` is not using the latest type definitions currently available on DefinitelyTyped project for next.
Added new list page examples that demonstrate how to use the new Types for both stateless functional components and classes. Also modified examples for list to demonstrate typings for `getInitialProps`.
ctx.pathname was set to url including the query of the page to prefetch
therefore the page was cached with the wrong key (article%3Fid=1?id=1),
and that's why the cache didn't work (right key: article?id=1)
RE: https://github.com/zeit/next.js/issues/4587, this pull request improves the with-segment example.
Previously, only SSR page loads were tracked. This pull request adds manual page view logging via `Router.events.on('routeChangeComplete')` in `Page.js`.
There is also a minor bug fix on the textarea to remove a console error.
…aces (home and about pages). This makes it the example more clear and why someone might want to use _app.js in the first place. Also, added a button on the about page that allows for passing and arbitrary value from the about page to the context provider. I disagree with the naming convention of calling the class CounterProvider. It includes both a Provider and Consumer so it should have some name that covers both. Maybe it should be called CounterContext but I did not change that. I've seen other examples of the same naming conversion so figure I'm the odd duck here (still think it's wrong no matter how many people do it).
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.
I changed the version to the following files:
- [x] - examples/with-next-css/package.json
- [x] - examples/with-draft-js/package.json
- [x] - examples/custom-server-polka/package.json
- [x] - examples/with-cerebral/package.json
- [x] - examples/with-zones/package.json
- [x] - examples/with-universal-configuration-runtime/package.json
- [x] - examples/with-apollo/package.json
- [x] - examples/with-higher-order-component/package.json
- [x] - examples/with-hashed-statics/package.json
- [x] - examples/with-pkg/package.json
- [x] - examples/with-jest/package.json
- [x] - examples/with-glamorous/package.json
- [x] - examples/with-custom-reverse-proxy/package.json
- [ ] - examples/with-emotion/package.json
- [x] - examples/with-styled-jsx-scss/package.json
- [x] - examples/with-styled-jsx-plugins/package.json
`with-emotion/package.json` already has the latest, so I guess it's other packabe. BUT I think we need to update this example with the latest version of `emotion` since it changed a little bit (for better).
The current reasonml needs an example of how to do getInitialProps. tmepple posted the only known way of doing it in [this comment](https://github.com/zeit/next.js/issues/4202#issuecomment-439175214). It is unlikely reasonml users are going to discover that comment or figure it out on their own so having it in an example is critical.
Also, dependencies updated. After updating dependencies, I get this error:
```
ModuleBuildError: Module build failed (from ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js):
[1] Error: Cannot find module '@babel/core'
[1] babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
```
Seems like @babel/core is required as peer dependency per [this comment](https://github.com/babel/gulp-babel/issues/124#issuecomment-326853222) so I added it.
The way to do getInitialProps has changed in 7.0.2 canary so this also has a comment in the code about what change is required to get that working.
Explains in details how the "with-universal-configuration" example works and rename it to "with-universal-configuration-build-time". Changing the example name makes the purpose of the example clear.
The "env-config.js" file introduce one more sample of variable usage that instantiates an immediate value of the local environment variable. This makes it even clearer how build-time variable configuration works. The "index.js" page makes explicit the use of these configured environment variables.
The universal configuration confusion happens when the value of the environment variable is used directly in the application causing an effect in server-side but not on the client side.
This example show how you can test Next.js apps with [react-testing-library](https://github.com/kentcdodds/react-testing-library).
This library encourages your applications to be more accessible and allows you to get your tests closer to using your components the way a user will, which allows your tests to give you more confidence that your application will work when a real user uses it. And also, is a replacement for enzyme.
<img width="733" alt="Image showing the words next.js + react testing library" src="https://user-images.githubusercontent.com/4689228/50387208-40223200-06de-11e9-9358-607092eb25a0.png">
This fixes the `with-jest-typescript` example to keep jest in sync with babel-jest (also updated to the latest of both). Having them resolve to different versions was resulting in weird errors.
When attempting to update the `transform` property in `jest.setup.js` to add babel-jest support to *.js/jsx files, it would throw:
> Plugin 0 specified in "node_modules/next/babel.js" provided an invalid property of "default" (While processing preset: "node_modules/next/babel.js")
Indirectly, this will fix https://github.com/zeit/next.js/issues/5917, once the author updates `jest.setup.js` to have:
```js
transform: {
'^.+\\.(js|tsx)?$': 'babel-jest',
},
```
This link ref is no more necessary to include in the Head Section. It cause error 404 in the console: http://localhost:3000/_next/static/style.css net::ERR_ABORTED 404 (Not Found)
* 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
