After talking with @timneutkens it was decided it'd be more streamlined to replace the onDemandEntries WebSocket with an alternative. Using the EventSource connection gives us these benefits over the WebSocket one:
- less code needed
- no extra server running
- no extra config for onDemandEntries
* Remove usage of WebpackBar and Friendly Errors
* Add new clearConsole helper
* Add new simplified output for development mode
* Add an explicit bootstrapping mode
* Add missing returns
* Use existing output style
* Adjust first output to say Waiting on
* Only print URL if present
* Implement circular JSON err.sh link
* Add test for getInitialProps returning circular json
* Make test warn less
* Fix tests
* Add reference to original tests
**This does not change existing behavior.**
building to serverless is completely opt-in.
- Implements `target: 'serverless'` in `next.config.js`
- Removes `next build --lambdas` (was only available on next@canary so far)
This implements the concept of build targets. Currently there will be 2 build targets:
- server (This is the target that already existed / the default, no changes here)
- serverless (New target aimed at compiling pages to serverless handlers)
The serverless target will output a single file per `page` in the `pages` directory:
- `pages/index.js` => `.next/serverless/index.js`
- `pages/about.js` => `.next/serverless/about.js`
So what is inside `.next/serverless/about.js`? All the code needed to render that specific page. It has the Node.js `http.Server` request handler function signature:
```ts
(req: http.IncomingMessage, res: http.ServerResponse) => void
```
So how do you use it? Generally you **don't** want to use the below example, but for illustration purposes it's shown how the handler is called using a plain `http.Server`:
```js
const http = require('http')
// Note that `.default` is needed because the exported module is an esmodule
const handler = require('./.next/serverless/about.js').default
const server = new http.Server((req, res) => handler(req, res))
server.listen(3000, () => console.log('Listening on http://localhost:3000'))
```
Generally you'll upload this handler function to an external service like [Now v2](https://zeit.co/now-2), the `@now/next` builder will be updated to reflect these changes. This means that it'll be no longer neccesary for `@now/next` to do some of the guesswork in creating smaller handler functions. As Next.js will output the smallest possible serverless handler function automatically.
The function has 0 dependencies so no node_modules are required to run it, and is generally very small. 45Kb zipped is the baseline, but I'm sure we can make it even smaller in the future.
One important thing to note is that the function won't try to load `next.config.js`, so `publicRuntimeConfig` / `serverRuntimeConfig` are not supported. Reasons are outlined here: #5846
So to summarize:
- every page becomes a serverless function
- the serverless function has 0 dependencies (they're all inlined)
- "just" uses the `req` and `res` coming from Node.js
- opt-in using `target: 'serverless'` in `next.config.js`
- Does not load next.config.js when executing the function
TODO:
- [x] Compile next/dynamic / `import()` into the function file, so that no extra files have to be uploaded.
- [x] Setting `assetPrefix` at build time for serverless target
- [x] Support custom /_app
- [x] Support custom /_document
- [x] Support custom /_error
- [x] Add `next.config.js` property for `target`
Need discussion:
- [ ] Since the serverless target won't support `publicRuntimeConfig` / `serverRuntimeConfig` as they're runtime values. I think we should support build-time env var replacement with webpack.DefinePlugin or similar.
- [ ] Serving static files with the correct cache-control, as there is no static file serving in the serverless target
Resolves#4055
Credit: https://github.com/zeit/next.js/pull/5095
I didn't use the ignore webpack plugin from the original PR and tested bundle size with https://github.com/zeit/next.js/pull/5339 - seems to be safe on that front.
Was able to get tests to pass locally, unsure of what goes wrong in CI 🤷♂️
**Questions**
1) The initial PR didn't include changes to `next-server/lib/router` in `getRouteInfo()`. Should the same changes be made within?
2) Should we add a test for rendering a component created via `forwardRef()`?
`component-with-forwardedRef`:
```javascript
export default React.forwardRef((props, ref) => <span {...props} forwardedRef={ref}>This is a component with a forwarded ref</span>);
```
some test:
```javascript
test('renders from forwardRef', async () => {
const $ = await get$('/component-with-forwardedRef')
const span = $('span')
expect(span.text()).toMatch(/This is a component with a forwarded ref/)
})
```
This message is from @timneutkens after making changes:
- Convert executables to Typescript
- Remove `minimist` in favor of `arg`
- Implement `--node-args` usage: `--node-args="--throw-deprecation"`
- Adds tests for usage of the `next` cli
~I am not sure if this is a valid fix yet, but I was going to let CI run the tests for me. I'll close and look into it if the build fails.~
Let me know if this will cause issues, but I don't think it should. The React docs recommends moving `componentWillMount` logic into the constructor
Fixes#4691Fixes#4614
This PR gives path to https://github.com/zeit/next-plugins/pull/242
I did not add or remove `^` near dependency versions in package.json files. However, I don't exclude that some changes can be made given that rc is more stable than beta.
Depends on https://github.com/zeit/next-plugins/pull/228
Failing tests are expected as `@zeit/next-css` has to be updated/released first.
This implements rendering of `.css` chunks. Effectively removing the custom document requirement when adding next-css/sass/less/stylus.
* Compile pages to .next/static/<buildid>/pages/<page>
* Fix test
* Export class instead of using exports
* Use constant for static directory
* Add comment about what the middleware does
Fixes#4713
I ran into this issue, when re-installing :
```
error upath@1.0.4: The engine "node" is incompatible with this module. Expected version ">=4 <=9".
error Found incompatible module
```
I used `yarn install --ignore-engines` as a workaround.
Fixes#4686
Adds tests for @zeit/next-typescript so that we don't regress on this again.
I've fixed an issue in the `next` CLI too which caused lingering processes when the process gets force killed, which is what we do in the test suite, so it kept running if there was no manual quit.
* Handle production errors correctly
* Improved source map support
* Make react-hot-loader hold state again
* Remove console.log
* Load modules on demand
* Catch errors in rewriteErrorTrace
* Update comment
* Update comment
* Remove source-map-support
* Load modules in next-dev
* Make sure error logged has sourcemaps too
* Add tests for production runtime errors
* Add tests for development runtime errors. Fix issue with client side errors in development
* Move functionality back to renderError now that error handling is consistent
* Rename to applySourcemaps
* Add build manifest
* Split out css since they don’t have exact name
* Remove pages map
* Fix locations test
* Re-run tests
* Get consistent open ports
* Fix static tests
* Add comment about Cache-Control header
* Initial implementation of next export without exportPathMap
* Shorter message
* Set up flow
* Create pages manifest
* Use pagesManifest for next export
* Fix tests
* Document defaultPathMap
* Replacing the path is no longer needed
* Use posix normalize for consistent behaviour
* Remove second instance of examples
* Add comment about what pages-manifest does
* Make windows path a route
* 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
* Add event-source-polyfill
Fixes an issue where the dev server crashes in IE11.
* Add next/config
* Set config on server start / client render
* Add documentation for next/config
* Add next/config support for next export
* Fix test
* Use the correct name
* Set default to empty object on the client side
* Add config tests
* Rename config to runtimeConfig
* Use the latest path-to-regexp for path-match.
* Fix the error route resolving.
* Give proper credit to path-match
* Remove an unwanted route.
* Revert "Remove an unwanted route."
This reverts commit 523c1687da8ddd499819e70df81567ec208e5998.
* Add a comment why we need to keep _error.js route.
* Speed up next build
* Document webpack config
* Speed up next build
* Remove comment
* Add comment
* Clean up rules
* Add comments
* Run in parallel
* Push plugins seperately
* Create a new chunk for react
* Don’t uglify react since it’s already uglified. Move react to commons in development
* Use the minified version directly
* Re-add globpattern
* Move loaders into a separate variable
* Add comment linking to Dan’s explanation
* Remove dot
* Add universal webpack
* Initial dev support
* Fix linting
* Add changes from Arunoda's work
* Made next dev works.
But super slow and no HMR support.
* Fix client side hot reload
* Server side hmr
* Only in dev
* Add on-demand-entries client + hot-middleware
* Add .babelrc support
* Speed up on demand entries by running in parallel
* Serve static generated files
* Add missing config in dev
* Add sass support
* Add support for .map
* Add cssloader config and fix .jsx support
* Rename
* use same defaults as css-loader. Fix linting
* Add NoEmitErrorsPlugin
* Add clientBootstrap
* Use webpackhotmiddleware on the multi compiler
* alpha.3
* Use babel 16.2.x
* Fix reloading after error
* Remove comment
* Release 5.0.0-univeral-alpha.1
* Remove check for React 16
* Release 5.0.0-universal-alpha.2
* React hot loader v4
* Use our static file rendering machanism to serve pages.
This should work well since the file path for a page is predictable.
* Release 5.0.0-universal-alpha.3
* Remove optional loaders
* Release 5.0.0-universal-alpha.4
* Remove clientBootstrap
* Remove renderScript
* Make sure pages bundles are served correctly
* Remove unused import
* Revert to using the same code as canary
* Fix hot loader
* Release 5.0.0-universal-alpha.5
* Check if externals dir exist before applying config
* Add typescript support
* Add support for transpiling certain packages in node_modules
Thanks to @giuseppeg’s work in https://github.com/zeit/next.js/pull/3319
* Add BABEL_DISABLE_CACHE support
* Make sourcemaps in production opt-in
* Revert "Add support for transpiling certain packages in node_modules"
This reverts commit d4b1d9babfb4b9ed4f4b12d56d52dee233e862da.
In favor of a better api around this.
* Support typescript through next.config.js
* Remove comments
* Bring back commons.js calculation
* Remove unused dependencies
* Move base.config.js to webpack.js
* Make sure to only invalidate webpackDevMiddleware one after other.
* Allow babel-loder caching by default.
* Add comment about preact support
* Bring back buildir replace
* Remove obsolete plugin
* Remove build replace, speed up build
* Resolve page entries like pages/day/index.js to pages/day.js
* Add componentDidCatch back
* Compile to bundles
* Use config.distDir everywhere
* Make sure the file is an array
* Remove console.log
* Apply optimization to uglifyjs
* Add comment pointing to source
* Create entries the same way in dev and production
* Remove unused and broken pagesGlobPattern
* day/index.js is automatically turned into day.js at build time
* Remove poweredByHeader option
* Load pages with the correct path.
* Release 5.0.0-universal-alpha.6
* Make sure react-dom/server can be overwritten by module-alias
* Only add react-hot-loader babel plugin in dev
* Release 5.0.0-universal-alpha.7
* Revert tests
* Release 5.0.0-universal-alpha.10
* Make sure next/head is working properly.
* Add wepack alias for 'next' back.
* Make sure overriding className in next/head works
* Alias react too
* Add missing r
* Fragment fallback has to wrap the children
* Use min.js
* Remove css.js
* Remove wallaby.js
* Release 5.0.0-universal-alpha.11
* Resolve relative to workdir instead of next
* Make sure we touch the right file
* Resolve next modules
* Remove dotjsx removal plugins since we use webpack on the server
* Revert "Resolve relative to workdir instead of next"
This reverts commit a13f3e4ab565df9e2c9a3dfc8eb4009c0c2e02ed.
* Externalize any locally loaded module lives outside of app dir.
* Remove server aliases
* Check node_modules reliably
* Add symlink to next for tests
* Make sure dynamic imports work locally.
This is why we need it: b545b519b2/lib/MainTemplate.js (L68)
We need to have the finally clause in the above in __webpack_require__.
webpack output option strictModuleExceptionHandling does that.
* dynmaic -> dynamic
* Remove webpack-node-externals
* Make sure dynamic imports support SSR.
* Remove css support in favor of next-css
* Make sure we load path from `/` since it’s included in the path matching
* Catch when ensurepage couldn’t be fulfilled for `.js.map`
* Register require cache flusher for both client and server
* Add comment explaining this is to facilitate hot reloading
* Only load module when needed
* Remove unused modules
* Release 5.0.0-universal-alpha.12
* Only log the `found babel` message once
* Make sure ondemand entries working correctly.
Now we are just using a single instance of OnDemandEntryHandler.
* Better sourcemaps
* Release 5.0.0-universal-alpha.13
* Lock uglify version to 1.1.6
* Release 5.0.0-universal-alpha.14
* Fix a typo.
* Introduce multi-zones support for mircofrontends
* Add section on css
* Add withRoute HOC
Rebased (squashed)
- removed routerToProps
- updated hoist-non-react-statics
- improved propTypes
* Expose the whole Router instead of the route.
* Make the example simple.
* Update examples and the readme.
* Add a test case.
This fixes one of the crucial bug in Next.js
The issue happens when you try to load a page when it's
prefetching.
With mitt, it only fires the first registered event.
Ran into blocking compatibility issues (unable to start an app even with the simplest possible example) when trying to upgrade the next.js version on an older project that used react/react-dom@15.4.2.
This was resolved by upgrading react/react-dom to the latest version (15.5.4) so updating dependencies and peerDependencies to reflect the latest version.
Raised in issue #2150
* Use babel-loader 7 beta.
This will get rid of the DeprecationWarning printed while
starting next.
Also this is the version recommened to use with Webpack 2.
* Update to the babel-loader-7
Here we don't use the full capabilities of babel-preset-env.
But it's recommended to use it without browser configs as
a substitute for babel-preset-latest.
That's why we did this.
* Run tests serially.
* Make test result verbose.
* Don't wait until closing the browser.
* Add some debug logs.
* Add bailing support.
* Get the browser with a timeout.
* Add some comments.
* Remove istanbul babel tranformation.
Jest already do it and it's breaking our coveralls hit.
* Add a plan for dynamic entry middleware.
* Use dynamic pages middleware to load pages in dev.
* Add the first version of middleware but not tested.
* Integrated.
* Disable prefetching in development.
Otherwise it'll discard the use of dynamic-entries.
* Build custom document and error always.
* Refactor code base.
* Change branding as on-demand entries.
* Fix tests.
* Add a client side pinger for on-demand-entries.
* Dispose inactive entries.
* Add proper logs.
* Update grammer changes.
* Add integration tests for ondemand entries.
* Improve ondemand entry disposing logic.
* Try to improve testing.
* Make sure entries are not getting disposed in basic integration tests.
* Resolve conflicts.
* Fix tests.
* Fix issue when running Router.onRouteChangeComplete
* Simplify state management.
* Make sure we don't dispose the last active page.
* Reload invalid pages detected with the client side ping.
* Improve the pinger code.
* Touch the first page to speed up the future rebuild times.
* Add Websockets based pinger.
* Revert "Add Websockets based pinger."
This reverts commit f706a49a3d886d0231259b7a1fded750ced2e48f.
* Do not send requests per every route change.
* Make sure we are completing the middleware request always.
* Make sure test pages are prebuilt.
* Remove traces of glamor
As talked about with @rauchg. Glamor takes up around 60KB of the bundle (pre-gzip). Since styled-jsx is the way to go now and we support adding glamor by the user we should remove it as dependency cause it is bundled even when not used.
Added rehydration to the example, since we did that in our code.
There is only one thing I'm not sure about and want to discuss:
what should we do with next/css. Right now I added a throw for when it is imported. I'm not sure if we should do that / some other way to notify the user it has been removed. The reasoning behind the throw is that when we would do a console.warn the user would see 'css.default.<X>' not found because we don't have the glamor dependency anymore.
* Update yarn.lock
* Remove test for styles
* Implement a very simple prefetching solution.
* Remove next-prefetcher.
* Require 'whatwg-fetch' only in the client.
* Use xhr in the code.
* Use a simple fetching solution.
* Fix 404 and xhr status issue.
* Move the prefetching implementation to next/router.
* Add deprecated warnning for next/prefetch
* Run only 2 parellel prefetching request at a time.
* Change xhr to jsonPageRes.
* Improve the prefetching logic.
* Add unit tests covering the Router.prefetch()
* Update examples to use the new syntax.
* Update docs.
* Use execOnce() to manage warn printing.
* Remove prefetcher building from the flyfile.js
Because, we no longer use it.
* Remove babell-plugin-transform-react-constant-elements.
With this, our shared-modules example's counter won't work in
production mode. (as this plugin enabled)
So, we could see more issues like this.
That's why we don't need this at this time.
* Update package.json.
* Randomize the port returned from test util's findPort().
* Use http's server.listen() to bind to a random available port.
* Update yarn.lock
* Update yarn.lock
* Add babel-preset-2016 support.
This adds the support for Exponentiation operator (**)
* Use babel-preset-latest.
* Remove babel-plugin-transform-async-to-generator in favor of babel-plugin-latest
It has es2017 preset and it comes with the above plugin.
* Use jest-cli instead of gulp plugin.
* Use jest-cli instead of gulp plugin.
* Move fixtures into the examples dir.
* Move test code of example app to the basic example.
* Add isolated tests for server/resolve
* Allow tests to use cheerio.
* Use portfinder to get a unique port.
* Move back integration tests into the example dir.
* Introduce next-test-utils.
* Remove gulp-jest
* Add coveralls support.
* Use transpiled version of code in dist.
This is to make sure same file gets covered
by both unit/isolated tests and integration tests.
* Add support for source maps.
* Use code from dist always.
* Use nyc to stop instrument.
* Add integration test suite for production usage.
* Use jest-cli.
* Add support for running e2e tests.
* Check gzipPath with fs.stat before serving
Otherwise, serve package might throw issues other than ENOENT
* Install chromedriver with npm install.
* Install chrome on travis-ci.
* Add --forceExit to Jest.
* Run tests only on Node v6.
That's because selenium-webdriver only supports
Node 6 LTS.
* Use chromedriver NPM module to install chromedriver.
* Use wd as the webdriver client.
* Run chromedriver before tests.
* Run travis for both node 4 and 6
* Remove unwanted npm install script.
* Move some common text utilities to next-test-utils
* Add lint checks and testing in npm prepublish hook.
* Use npm on travis-ci.
We are having some caching issues with yarn and chromedriver.
* Make tests work on windows.\n But chromedriver doesn't work.
* Clean up dependencies.
* Run chromedriver in background without any tools.
* Fix a typo in the code.
* Use ES6 features used in node4 inside the gulpfile.
* Add some comments.
* Add support for running in windows.
* Stop chromedriver properly on windows.
* Fix typos.
* Write BUILD_ID when building.
It's a random id (uuid.v4())
* Add buildId to the core JS files.
* Add immutable cache-control header.
Only if the buildId is matched.
* Set '-' as the dev buildId always.
* Add buildId handling for JSON pages.
