The existing example currently does not work because of outdated usage patterns. This PR seeks to update these patterns to the latest recommended best practice while bumping versions.
# Summary
- Bumped version numbers in `package.json`;
- Moved `<link />` tag from `pages/index.js` to `pages/_document.js` as is [recommended](https://github.com/zeit/next-plugins/tree/master/packages/next-css#usage);
- Replace individual css/font imports with import of minified CSS as is [recommended](https://react.semantic-ui.com/usage#semantic-ui-css-package);
- Removed prop (no longer used) from `<List />` element.
I’ve been experimenting with Next.js and Fastify and I made the following changes to the Fastify example based on what I found:
### Use Fastify’s plugin API
IMO putting Fastify’s listen call in a promise callback is an anti-pattern, b/c the Fastify plugin API is meant to solve the problem of async server bootstrapping.
[From Fastify’s Getting Started docs](https://www.fastify.io/docs/latest/Getting-Started/):
> Fastify provides a foundation that assists with the asynchronous bootstrapping of your application.
### Set reply.sent in handlers which return promises
[From Fastify’s Routes docs](https://www.fastify.io/docs/latest/Routes/#promise-resolution):
> If your handler is an `async` function or returns a promise, you should be aware of a special behaviour which is necessary to support the callback and promise control-flow. If the handler's promise is resolved with `undefined`, it will be ignored causing the request to hang and an *error* log to be emitted.
>
> 1. If you want to use `async/await` or promises but respond a value with `reply.send`:
> - **Don't** `return` any value.
> - **Don't** forget to call `reply.send`.
> 2. If you want to use `async/await` or promises:
> - **Don't** use `reply.send`.
> - **Don't** return `undefined`.
`app.render` returns a promise which contains undefined, so returning it in a Fastify handler will log an error. However, returning anything besides undefined will cause Fastify to try to write to the response which Next.js has already ended. The solution is to manually set the `reply.sent` flag to true when any Next.js rendering promise is fulfilled as an alternative to calling `reply.send`.
### Make Next.js handle 404 errors
This allows any route to throw a NotFound error and let Next.js handle the rendering of the 404 page.
### Make Next.js handle any route which starts with `_next` in dev
This prevents dev routes from being caught by user-defined routes.
As seen on `with-apollo-auth` there are some things that need to be addressed here too.
* #4554 remove useless `apolloState` from App props on `getDataFromTree`
* #4563 simplify `apolloState` prop
Let me know if further changes/fixes are needed.
Thank you 🎉
Updating to a more recent version of `@types/next` fixes an error I encountered while building a new app on top of the "with-typescript" example:
`Property `push` not found in SingletonRouter`
Additional context: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/26665
To test, add a simple Router.push operation to the `pages/index.tsx`
```
import Router from 'next/router'
// ...
<span onClick={() => Router.push({ pathname: '/about' })}>TEST</span>
```
Apollo's getDataFromTree is supposed to be called during the server side rendering.
Being called in browser it fires an unnecessary fake render process and blocks components from rendering with loading=true.
Also there was a mistake in this code:
// `getDataFromTree` renders the component first, the client is passed off as a property.
// After that rendering is done using Next's normal rendering pipeline
this.apolloClient = props.apolloClient || initApollo(props.apolloState.data)
**Apollo** component is not rendered by getDataFromTree actually, it renders the **App** directly, thus props.apolloClient will always be undefined.
This example was discussed here: https://github.com/zeit/next.js/issues/387.
The purpose of the PR is to add the simplest possible integration with Storybook.
It leaves the default Storybook and also adds a custom component to show how it would be used in both the app and Storybook.
Update:
Tested with latest 👉 6.1.1
I had some trouble to get server side rendering with the AWSAppSyncClient working. I finally found a solution in https://github.com/awslabs/aws-mobile-appsync-sdk-js/issues/82 but it might be worth to share it here as well. Instead of adding a big code block to each file I'll just refer to this Pull Request.
______
In case you want to use the `AWSAppSyncClient` you just need to replace the `create()` function with this function:
```jsx
import AWSAppSyncClient from 'aws-appsync';
import { AUTH_TYPE } from 'aws-appsync/lib/link/auth-link';
function create(initialState) {
const client = new AWSAppSyncClient({
url: AWS_AppSync.graphqlEndpoint,
region: AWS_AppSync.region,
auth: {
type: AUTH_TYPE.API_KEY,
apiKey: AWS_AppSync.apiKey,
// Amazon Cognito Federated Identities using AWS Amplify
//credentials: () => Auth.currentCredentials(),
// Amazon Cognito user pools using AWS Amplify
// type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
// jwtToken: async () => (await Auth.currentSession()).getIdToken().getJwtToken(),
},
disableOffline: true,
}, {
cache: new InMemoryCache().restore(initialState || {}),
ssrMode: true
});
return client;
}
```
with-socket.io example was using a single index file and was managing connection in there. This would lead handling connection (disconnecting and reconnecting) in each added page.
I updated example with addition of `_app.js` and handled connection in there. This helped only subscribing to event in page and maintaining connection throughout example.
I have updated [examples/with-markdown](https://github.com/zeit/next.js/tree/canary/examples/with-markdown) in order to make it works with next 6 🎉
<details>
<summary>Error</summary>
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/zhenyatelegin/Desktop/next.js/examples/with-markdown/node_modules/markdown-in-js/babel.js
</details>
Hello!
I have updated `babel-plugin-module-resolver` to `^3.1.1` and moved it to `devDependencies` in [with-absolute-imports](https://github.com/zeit/next.js/tree/canary/examples/with-absolute-imports) example to make it work with Babel 7 :)
## Error logs
```
zhenyatelegin@MBP-Zhenya ~/Desktop/next.js/examples/with-absolute-imports canary yarn build
yarn run v1.5.1
warning package.json: No license field
$ next build
> Failed to build
{ Error: (client) ./pages/index.js
Module build failed: Error: Cannot find module 'babel-plugin-module-resolver' from '/Users/zhenyatelegin/Desktop/next.js/examples/with-absolute-imports'
at Function.module.exports [as sync] (/Users/zhenyatelegin/Desktop/next.js/node_modules/resolve/lib/sync.js:40:15)
at resolveStandardizedName (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/files/plugins.js:78:29)
at resolvePlugin (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/files/plugins.js:27:10)
at loadPlugin (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/files/plugins.js:35:18)
at createDescriptor (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:152:21)
at /Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:104:12
at Array.map (<anonymous>)
at createDescriptors (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:103:27)
at createPluginDescriptors (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:99:10)
at /Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:50:19
at plugins (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:40:25)
at mergeChainOpts (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-chain.js:296:68)
at /Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-chain.js:251:7
at buildRootChain (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-chain.js:85:20)
at loadPrivatePartialConfig (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/partial.js:41:53)
at Object.loadPartialConfig (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/partial.js:66:16)
@ multi ./pages/index.js
at /Users/zhenyatelegin/Desktop/next.js/dist/server/build/index.js:144:31
at runWithDependencies (/Users/zhenyatelegin/Desktop/next.js/node_modules/webpack/lib/MultiCompiler.js:154:4)
at /Users/zhenyatelegin/Desktop/next.js/node_modules/async/dist/async.js:1140:9
at /Users/zhenyatelegin/Desktop/next.js/node_modules/async/dist/async.js:473:16
at iteratorCallback (/Users/zhenyatelegin/Desktop/next.js/node_modules/async/dist/async.js:1064:13)
at /Users/zhenyatelegin/Desktop/next.js/node_modules/async/dist/async.js:969:16
at /Users/zhenyatelegin/Desktop/next.js/node_modules/async/dist/async.js:1137:13
at runCompilers (/Users/zhenyatelegin/Desktop/next.js/node_modules/webpack/lib/MultiCompiler.js:96:47)
at fn (/Users/zhenyatelegin/Desktop/next.js/node_modules/webpack/lib/MultiCompiler.js:101:6)
at compiler.run (/Users/zhenyatelegin/Desktop/next.js/node_modules/webpack/lib/MultiCompiler.js:150:5)
at emitRecords.err (/Users/zhenyatelegin/Desktop/next.js/node_modules/webpack/lib/Compiler.js:265:13)
at Compiler.emitRecords (/Users/zhenyatelegin/Desktop/next.js/node_modules/webpack/lib/Compiler.js:371:38)
at emitAssets.err (/Users/zhenyatelegin/Desktop/next.js/node_modules/webpack/lib/Compiler.js:258:10)
at applyPluginsAsyncSeries1.err (/Users/zhenyatelegin/Desktop/next.js/node_modules/webpack/lib/Compiler.js:364:12)
at next (/Users/zhenyatelegin/Desktop/next.js/node_modules/tapable/lib/Tapable.js:218:11)
at Compiler.compiler.plugin (/Users/zhenyatelegin/Desktop/next.js/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
errors:
[ '(client) ./pages/index.js\nModule build failed: Error: Cannot find module \'babel-plugin-module-resolver\' from \'/Users/zhenyatelegin/Desktop/next.js/examples/with-absolute-imports\'\n at Function.module.exports [as sync] (/Users/zhenyatelegin/Desktop/next.js/node_modules/resolve/lib/sync.js:40:15)\n at resolveStandardizedName (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/files/plugins.js:78:29)\n at resolvePlugin (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/files/plugins.js:27:10)\n at loadPlugin (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/files/plugins.js:35:18)\n at createDescriptor (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:152:21)\n at /Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:104:12\n at Array.map (<anonymous>)\n at createDescriptors (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:103:27)\n at createPluginDescriptors (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:99:10)\n at /Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:50:19\n at plugins (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:40:25)\n at mergeChainOpts (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-chain.js:296:68)\n at /Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-chain.js:251:7\n at buildRootChain (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-chain.js:85:20)\n at loadPrivatePartialConfig (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/partial.js:41:53)\n at Object.loadPartialConfig (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/partial.js:66:16)\n @ multi ./pages/index.js',
'(server) ./pages/index.js\nModule build failed: Error: Cannot find module \'babel-plugin-module-resolver\' from \'/Users/zhenyatelegin/Desktop/next.js/examples/with-absolute-imports\'\n at Function.module.exports [as sync] (/Users/zhenyatelegin/Desktop/next.js/node_modules/resolve/lib/sync.js:40:15)\n at resolveStandardizedName (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/files/plugins.js:78:29)\n at resolvePlugin (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/files/plugins.js:27:10)\n at loadPlugin (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/files/plugins.js:35:18)\n at createDescriptor (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:152:21)\n at /Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:104:12\n at Array.map (<anonymous>)\n at createDescriptors (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:103:27)\n at createPluginDescriptors (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:99:10)\n at /Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:50:19\n at plugins (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:40:25)\n at mergeChainOpts (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-chain.js:296:68)\n at /Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-chain.js:251:7\n at buildRootChain (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-chain.js:85:20)\n at loadPrivatePartialConfig (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/partial.js:41:53)\n at Object.loadPartialConfig (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/partial.js:66:16)\n @ multi ./pages/index.js' ],
warnings: [] }
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c next build
Directory: /Users/zhenyatelegin/Desktop/next.js/examples/with-absolute-imports
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "/Users/zhenyatelegin/Desktop/next.js/examples/with-absolute-imports/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```
* remove `predeploy` scripts from `firebase.json` in favour of `npm` `pre` scripts as they are consistent across `deploy` and `serve` commands. (to revisit once Firebase add support in the `firebase.json` for `preserve`)
* update deps
* workaround some bug where Babel could not resolve the standard `next/babel` config. Explicitly defining this seems to remove the issue.
* closes#4562
**Make amp example valid**
I'm using amp validator chrome plugin which shows that `meta charset=utf-8` is duplicated.
I assume that `Head` component adds `<meta charset="utf-8" class="next-head next-head">`
anyway.
And this line just duplicating it.
<img width="987" alt="screen shot 2018-06-06 at 15 54 45" src="https://user-images.githubusercontent.com/1488195/41036743-198ca00a-69a2-11e8-978c-5a5cb5a994d2.png">
Hello! I ran into an issue using typescript and jest with next 6.0.0. I was able to work through fixing it and I wanted to share my solution back to next.js, by upgrading the with-jest-typescript example to next 6.0.0.
The steps I followed were:
1. `npx babel-upgrade --write` which added babel-core@^7.0.0-bridge.0 to allow jest's babel 6 to play nice with next's babel 7
2. Remove `ts-jest` and replace with `babel-jest` to use babel to transform the typescript code, as is done when the dev and production builds run
3. Update the babelrc to use commonjs modules in test mode to be compatible with jest
Also, I removed the `NODE_ENV=test` on the jest task, because jest sets the env to test anyways, and I'm on windows where this code is incorrect. The other option is to use `cross-env` but I felt it was simpler to just remove the environment override.
To my knowledge, this PR would help on the following issues:
#3663#4227#4531#4528#4239
Changes
* Update dependencies.
* Remove sending client prop to component on pages.
* Use withApollo correctly on components.
* Use `client.cache.reset()` instead of `prop.client.resetStore()`.
@adamsoffer @timneutkens
* with-firebase-hosting: update next.js 6, readme about customization
* now next.js 6 is on Babel 7, remove conflicting babel deps
* update Next Server/Cloud Function .babelrc config
* update other deps: Cloud Functions to 1.x.x etc
* rm install-deps script as it is no longer used on deployment (firebase does not upload node_modules)
* make scripts consistent in their wrapping of dirs with \" (escaped double quotes)
* with-firebase-hosting: pin next to "latest" version
* with-firebase-hosting: fix lint errors
Adds an example based off of @jthegedus work on firebase hosting, compatible with next v6 and using typescript in both the firebase functions and the next app.
Electron recommends to disable nodeIntegration in BrowserViews.
This PR follows this recommendation and updates the example accordingly.
Changes:
- disable nodeIntegration
- update dependencies
* Rename page component's class name: Counter => Index, Counter => Other
* Rename counter component class name: AddCount => Counter
* Add counter actions `decrement` and `reset` same as with-redux example
* Modify page link by NavigateTo attr in Page component
* Modify license MIT => ISC same as others in package.json
* Modify README
fixes#4390
* Installing only `babel-plugin-transform-decorators-legacy` didn't work
* It also needs to install `babel-plugin-transform-class-properties`
It's better that Counter behave not only `increment (add)` but also `decrement` or `reset`.
* Add decrement, reset handlers and rename add handler in `components/counter.js`
* Add increment, decrement, reset actions to `store.js`
* Rename page component class name: Counter => Index in `pages/index.js`
* Remove needless dispatch count event on getInitialProps in `pages/index.js`
* Format JSX to be readable in `pages/_app.js`
* Remove needless line from `components/examples.js`
* Remove needless spaces in `lib/with-redux-store.js`
The option `"decoratorsLegacy": true` seems mandatory, fails without it:
> The new decorators proposal is not supported yet. You must pass the `"decoratorsLegacy": true` option to @babel/preset-stage-0
Fixes the compilation error :
```
* ./clock in ./components/examples.js
ModuleNotFoundError: Module not found: Error: [CaseSensit
ivePathsPlugin] `/components/clock.js` does not matc
h the corresponding path on disk `Clock.js`.
```
This example gave me 404s on `pages/*.tsx` when using it with the latest nextjs (`5.1.0`) and `@zeit/next-typescript@0.0.11`. The latest next-typescript plugin version fixes it.
* Add new apollo example
* Update readme
* Update with-apollo to use _app.js
* Move withData to _app
* Make SSR work again
* Remove withData
* Use HOC to provide apolloClient
* Spread pageprops
With this setup we're compiling the .re/.ml files directly to source
directories with a .bs.js extension, and enabling next.js to pick up
that extension for pages.
* Added with-jest-typescript example with files and readme
* Updated package.json
As per the comment, updated the package.json so the info is same as in other examples.
* Proper name in package.json
* Fix with-relay-modern example
Starting with react-relay 1.5.0 the schema canno't be in the same dir as
the src. This can be fixed by excluding the schema dir. Globs should
also be inside quotation marks, to avoid non-deterministic behavior of
different shells.
* Add missing key on BlogPosts
* Examples: clarify language around Yarn create & npx
* add missing READMEs and create-next-app usage
* suggest people tag jthegedus in firebase related issues
* add yarn alt instructions
* cerebraljs example readme & fixes
* Fix serve command
From the Firebase docs, you must use --only in order to run the local function emulator.
See https://firebase.google.com/docs/functions/local-emulator
* Add production env for firebase serve
Doesn't work without this
* Update text as suggested by @jthegedus
* Remove deprected use of apollo-client-preset, and refactor
Changes
* Remove deprected use of apollo-client-preset in favor of apollo-boost
* Refactor for usage of react-apollo@2.1
* Use standard
Just ran standard --fix
This was causing react-apollo to crash on any SSR page that needed the page's query to make the GraphQL queries.
It's magically passed on the client, but we have to manually pass it to the composed component here
* pass down getInitialProps ctx to ComposedComponent
* pass apollo client instance directly to getDataFromTree instead of through the ApolloProvider wrapper.
* Avoid redundant empty serverState initialization (It's always initialized)
* remove global npm install of create-next-app
* add npx to create-next-app command in examples
* add bash to shell snippets
* add yarn create to next-app command in examples
* fix READMEs named with lowercase
* change READMEs to use UPPERCASE
* FIX deploy with-firebase-hosting
* add npm run command in place of yarn in firebase.json predeploy hooks
* Change yarn with npm
* firebase-hosting example: Add warning in examples README
* firebase-hosting example: clarify warning language
* firebase-hosting example: remove the warning and upgrade to canary
* firebase-hosting example: actually upgrade pkg.json
- simplify pages by introducing withI18next hoc
- add Trans component example
- replace <div> with <p> in demo components to make text on pages easier to read
German translation by @marinaroot
* Next.js v5 update, _error & _document bugs fixes
* document clean script
* remove old build artefact
* add babelrc
* reset next.js version to 'latest' from '^5.0.0'
* typo in readme
* format code
* remove _files as they were a fix for a solved, but unreleased problem
* [example] with-apollo-and-redux-saga
- Using Apollo to get GraphQL Data? Dope.
- Using Redux Saga to do other stuff outside of that? Cool.
- Nary the two shall meet? Most likely. 😀️
This is a breakout of #3463 where we were combining Apollo and Redux.
This may not be an example that gets a PR.
Why? Well, the examples are meant to pick and choose and combine
yourself. At least I believe, and this is basically a combination of two
examples (`with-apollo` and `with-redux-saga`) with some reworking.
**pages/**:
`index`: withReduxSaga()
`about`: ()
`blog/index`: withReduxSaga(withApollo())
`blog/entry`: withApollo()
* [refactor] fix lint (again), remove superfluous calls
* [fix] package.json: with-apollo-and-redux-saga
Updated the `name` and made sure `es6-promise` was in dependencies
* [refactor] remove semi-colons in clock/sagas
* [refactor] remove old migration code
* Add custom-server-typescript example (see #3694)
* Fix linting errors in custom-server-typescript
* Provide proper arguments to ts-node.
* Fix import and fix all linting errors.
* Use import in server as well.
* Update nodemon.json
* Move security related test cases into a its own file.
* Removes the unused renderScript function
* Add a nerv example. (#3573)
* Add a nerv example.
* Fix for indentation/style
* Fix for name
* Release 5.0.0
* Add multi-zones docs. (#3688)
* with emotion example - hoist styles out of the index page component (#3821)
* Use indexOf instead of startsWith (#3758)
* Use indexOf instead of startsWith
This fixes an IE11 regression, see #3755
* Lint the code
* #3700 Add examples for next-sass
* #3700 Use React.Fragments and more
* Fix#3700 remove some keys to make more clear
* Fix#3700, change to without-css-modules
* Replace PageWrapper with _document for more concise code. #3700
