* Add more export tests for AMP
* Remove console.log
Co-Authored-By: ijjk <22380829+ijjk@users.noreply.github.com>
* remove extra line
Co-Authored-By: ijjk <22380829+ijjk@users.noreply.github.com>
* Add support for amp to export
* Anchor canonical replace
* Disable profiling test for now
* Centralize amp utils to next-server/server/utils
* re-enable profiling test
* Add support for .amp.js pages and
resolving /page?amp=1 to page.amp.js
* Update amp tests
* Update example and clean up amp page resolving
* Add nested amp test
* page => normalizedPage
* Add type to page options
* Add handling of amp with all pageExtensions
and normalize page
* Make sure findPageFile only falls back to
amp if enabled
When overriding `config.resolve.alias` incorrectly webpack will throw an error because private-next-pages is not defined. This adds a more descriptive error explaining the error better.
Fixes: #6681
By default when `next export`ing a Next.js application we will automatically append a `/` to all urls to be fully compatible with the directory structure being output.
However since most platforms support directory indexes it makes sense to change this default in the future.
This PR adds `exportTrailingSlash` as experimental flag. We'll try this out for a bit on nextjs.org / zeit.co/docs before introducing it as new option.
The default value is `true` as this is the current behavior in stable Next.js.
```
{
experimental: {
exportTrailingSlash: false
}
}
```
⚠️ as with all experimental flags being added this is subject to breaking between canary/stable versions.
* Add a new field to webpack types
* Revert "Add a new field to webpack types"
This reverts commit d35fa02207fbfd0085da0fc56aac42c4ff7c34c9.
* Add HashedChunkIdsPlugin to make consistent chunk ids
* Revert "Revert "Add a new field to webpack types""
This reverts commit 338219049e1432038f90c91928b010bbb1267999.
* Make it optional
* Remove record ids
* Revert "Remove record ids"
This reverts commit 15c22dbcda72466c382397c91d02295620f62326.
* Show a better error when someone throws undefined
* Update error wording
Co-Authored-By: ijjk <22380829+ijjk@users.noreply.github.com>
* Update error wording in test
Co-Authored-By: ijjk <22380829+ijjk@users.noreply.github.com>
* Update test and add check for statusCode
before updating error
When the webpack `mode` is set to `production`, `minimizer: undefined` means "use the default webpack minifier."
We need to explicitly disable the webpack minifier via `minimize: false`. This should speed up non-serverless builds. 😄
This doesn't affect dev, but I added the toggle there for consistency.
### changes
#### remove trailing spaces
When I was using example I noticed trailing spaces.
So, this PR removes the trailing spaces of json file, README, and others.
`examples/with-jest-typescript/src/modules/cars/Overview.tsx` also has it, but this time it did not change as tslint error occurs at commit.
Thanks so much for putting this amazing framework together!
I was reading through the docs and noticed how `an URL` was a little awkward to read. This is an incredibly small update to the readme to change the wording to `a URL`.
* Add warning on stalled page load possibly from too many tabs open
* Add test for stalled warning
* Update onDemand pinging to close on routeChangeStart and added
warning when onDemand handler detects multiple tabs from the same
browser
After discussion it was decided instead of rewriting `next/config` and `next/head` imports to `next-server/config` and `next-server/head` we should just allow importing them as `next/config` and `next/head`
Fixes: #6187
* AMP page reload
* Fix comment
* Skip dev files in production
* Polyfill event source
* Add HMR test for AMP
* Use webdriver
* Use a dynamic server for HMR test
* ffs
Next.js no longer uses `jsonPageRes`.
This PR removes it from `en-us` and `zh-cn` documentation (formatting picked up some changes on zh-cn readme).
Also updated the Flow type def for `getInitialProps`.
Resolves#6363
We don't use a lot of the features of `glob`, so let's remove it in favor of a leaner approach using regex.
It's failing on windows and I have no idea why and don't own a windows machine 🤦🏼♂️
(Ignore some of the commits in here, I forgot to create the new branch before I started working)
This introduces a new `<Html>` tag for a custom `Document` so that we can correctly toggle the `amp` flag (among other things in the future ... maybe).
This is already "tested" through every other test & the AMP validator -- but let me know if we want explicit tests.
Currently, `getBaseWebpackConfig` is marked async, but it doesn't await anything or otherwise return a Promise. Please correct me if I am wrong, but it looks like it can be made synchronous.
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
* fix(launch-editor): resolve filename including current working directory
* refactor: handle when fileName is already absolute
* feat: use Next.js dir instead of process.cwd()
Arguments that held the same name as one of the default commands were filtered out, causing issues.
For example `next build build` would get rid of the second `build` parameter.
Fixes#6263
* 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
After discussion, I added falling back to fetch based pinging when the WebSocket fails to connect. I also added an example of how to proxy the onDemandEntries WebSocket when using a custom server. Fixes: #6296
Closes: #6244
This will block the following keys:
```
NODE_.+
__.+
```
There doesn't seem to be a way to simulate a failed build or else I'd add tests for it.
* Set default `Error` status code to 404
This is an appropriate default behavior because:
1. When the server encounters an error, the `err` property is set.
2. When the client-side application crashes, the `err` property is set.
This means the "only" way to render the `/_error` page without an error
is when a page is not found (special condition).
Fixes#6243Closes#5437
* Add new integration test for client side 404
* single quotes
* Remove unused variable
* Standard needs to go away
* Whoops
* Check for null status code in res and err
* Only check response for valid statusCode
* convert export default anonymous functions into named functions
* change examples to function declaration and split export in classes
* change NextHead name to Head and rename component
* Update README.md
I know I'm a moron for not understanding what's written in black on white, but... Maybe this will save someone an hour or two 😄
* Apply proposed changed
* Implement circular JSON err.sh link
* Add test for getInitialProps returning circular json
* Make test warn less
* Fix tests
* Add reference to original tests
Fixes#6117
I'm not entirely sure why we had this rule in the first place. I think for some tests related things when we didn't have a monorepo yet. However it could also be related to bundle sizes. I'll compare that when the build finishes.
The reason for #6117 is that we added `react-is` to the dependency tree of Next.js to check valid elements. react-redux uses hoist-non-react-statics which ships a different version of react-is in this case, one that has `ReactIs.isMemo`
Fixes#5363
I noticed this happening when making some changes on the nextjs.org/learn app. Basically we didn't apply updates when a warning was emitted from webpack. This would cause issues for users using eslint-loader or similar too.
There's still a few Typescript helpers in use, but regenerator is added by Babel after this change, as it was already in the bundle it'll drop bundle sizes by quite a bit, eg _app.js becomes half the size.
`react-is` isn't used in production, so we shouldn't bundle it.
Note: most of those plugins are using the `dev` variable, but in case someone runs `NODE_ENV=development next build`, they would need a copy of `react-is` because the conditional use of `react-is` checks `NODE_ENV` — not whether or not HMR is being used (what what the `dev` variable is based on).
Adds a Bullet Point under "Production deployment"
for the Table of Contens / Link Section.
Wanted to add this as a comment in #6070.
Great work as always!
Introduces full support for Babel 7 including JSX Fragments shorthand.
Switched to visiting the `Program` path and then start a traversal manually to solve conflicts with other Babel plugins.
Fixes https://github.com/zeit/now-builders/issues/168
For some reason with a certain mix of deps `...` is not supported in webpack's parsing.
By default it is supported as all our tests passed before and we have deployed Next.js apps on v2 already.
It’s an inconsistent result, users should use ctx instead. At a later time we’ll normalize the properties passed into _app.js its getInitialprops to be consistent with pages.
It looks like :
```
Pages sizes after gzip:
┌ / (196 B)
├ /_app (11.5 kB)
├ /_error (4.44 kB)
├ /blog (196 B)
└ /blog/page (195 B)
```
(style inspired from now-cli : https://github.com/zeit/now-cli/blob/canary/src/util/output/builds.js)
I'll add dynamic chunks in a separate PR.
@timneutkens Do you want to keep `_app` and `_error` or filter them out ? I think it's a good idea to keep them, because `_app` can get pretty large and it would encourage code splitting in that case.
This PR aims at replacing next-server/lib/event-emitter.js by mitt.
Fix https://github.com/zeit/next.js/issues/4908
event-emitter.js is ~400 bytes gzipped vs mitt is 200 bytes
Extends on #5927, instead of `.default` we'll expose `.render` which is semantically more correct / mirrors the naming of the custom server API.
I've updated the spec in #5927 to reflect this change.
(copied from #5927):
```js
const http = require('http')
const page = require('./.next/serverless/about.js')
const server = new http.Server((req, res) => page.render(req, res))
server.listen(3000, () => console.log('Listening on http://localhost:3000'))
```
Saw a reply on the original pull request that the WebSocket using a random port broke their set up so I added a `--websocket` or `-w` argument similar to the `-p` argument to allow manually setting this port also.
Fixes#5845
Implement tslint for core files
**What is this?**
Implements tslint for both next and next-server, but keeps standardjs/eslint for the .js files that are still there, we're gradually migrating to Typescript.
**How does it work?**
Before every commit (pre-commit) we execute the following `tslint` command:
`tslint -c tslint.json 'packages/**/*.ts`
**TSLint Rules**
In order to avoid as much changes as possible I marked some rules as false. This way we can improve the linter but making sure this step will not break things. (see tslint.json)
**Note**
After merging this PR, you'll need to update your dependencies since it adds tslint to package.json
**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
This brings us one step closer to outputting serverless functions as renderToHTML now renders the passed components, which allows us to bundle the renderToHTML function together with statically imported components in webpack.