This makes sure we don't duplicate the `/` route or any others while exporting with `exportTrailingSlash` enabled. We do still output `404.html` with `exportTrailingSlash` enabled in case anyone was relying on this file being present.
Fixes: https://github.com/zeit/next.js/issues/11008
This fixes an edge case where an application can seemingly randomly be opted out of the automatic static optimization from having an `_error` file that isn't directly nested under the `pages` folder e.g. `pages/hello/_error.js`.
Since in serverless mode we use the `_app` export from the first serverless page, if this `_error.js` file is used to check for custom `getIniitalProps` in `_app` and the `_error.js` page had a custom `getInitialProps` itself it would cause the check to fail opting the application out of the static optimization.
This fixes it by having the check be explicit instead of relying on the bundle name and it also adds regression tests for this. It might be good to also add a warning when `_error` or `_app` are not directly nested under the pages folder in a follow up PR
**Affected examples**
with-segment-analytics
with-slate
with-portals-ssr ( _with-portals-ssr is based on a package not being updated in the last year_)
with-videojs
with-next-page-transitions
with-firebase-cloud-messaging
with-dynamic-app-layout
with-dynamic-import
with-next-transition
with-carbon-components
with-cerebral
with-custom-babel-config
Here and there I have removed some redundant imports as well. I believe with this PR, there are only 1 or 2 examples left using class-based components. If by any chance you find any, let me know and I'll refactor them too.
If you don't like anything or you want me to change something, please let me know.
**If there is anything else you'd like me to help with, I would be honored to assist.**
The experimental modern mode runs the type checking plugin twice, which **occasionally** suffers from a race condition that hangs the build.
This PR fixes type checking to only be run once.
While this test cannot 100% reproduce/capture the race condition, I don't feel strongly about the test case:
- We're planning on eliminating this type checking plugin ASAP (for a faster alternative)
- Modern mode implementation as-is will probably go away with webpack 5
Closes#9990 by collecting all paths with errors during `next export` and reporting them sorted in the error summary at the end.
It will produce an output similar to:
```
Error: Export encountered errors on following paths:
/nested/page
/page
/page-1
/page-10
/page-11
/page-12
/page-13
/page-2
/page-3
/page-4
/page-5
/page-6
/page-7
/page-8
/page-9
at _default (/app/next.js/packages/next/dist/export/index.js:19:788)
at process._tickCallback (internal/process/next_tick.js:68:7)
```
I tested the output with the `handle-export-errors` integration test suite, but I'm not sure how to gracefully test this added output.
I thought of collecting all page source files with [recursiveReaddirSync](2ba352da39/packages/next/next-server/server/lib/recursive-readdir-sync.ts) but it seems I can't import it in js test files:
```
SyntaxError: /app/next.js/packages/next/next-server/server/lib/recursive-readdir-sync.ts: Unexpected token, expected "," (11:5)
9 | */
10 | export function recursiveReadDirSync(
> 11 | dir: string,
| ^
12 | arr: string[] = [],
13 | rootDir = dir
14 | ): string[] {
```
The test itself could look like:
```js
it('Reports failing paths', async () => {
const { stderr } = await nextBuild(appDir, [], {
stdout: true,
stderr: true,
})
const pages = []
// collect pages to be ['/page', '/page-1', ... etc.]
pages.forEach(page => {
expect(stderr).toContain(page)
})
})
```
As discussed this adds bundling of `.env` files in `serverless` mode so that the environment values are also available when deploying with this target
closes: https://github.com/zeit/next.js/issues/13332
fix#12136
I add a prompt if there is an error when trying to download example files.
Maybe could be better to add an error class and in create-app.ts on every "console.error" trow a new Exception and manage it in catch. What you think ? 👯
Per https://github.com/zeit/next.js/issues/12964
* with-ant-design
* with-dynamic-import
* with-iron-session
* with-monaco-editor
* with-next-page-transitions
* with-react-with-styles
* with-style-sheet
* with-why-did-you-render
Tested each example, working as intended, no additional issues presented
This is purely adding types except for the line:
```js
params = getRouteMatcher(getRouteRegex(page))(path) || undefined
```
Also added a couple of `@ts-ignore` as to avoid having to make any more functional changes
Changed the URLs inside the Monaco Editor Example: https://github.com/zeit/next.js/tree/canary/examples/with-monaco-editor
Converted the worker URL to start with the base URL.
The reason is if you use the Monaco example anywhere but in the main `pages` folder, it won't work since it uses a relative URL instead.
For example if we'll move the code to `pages/room/index.js` it won't work since it will try to search for the files inside `room/_next/_static/` instead of `_next/_static/`.
The base URL I added fixes the problem.
* set up with-ts-eslint-jest example app
* eslint ignore new app bc it has a conflicting eslintrc
* make eslint + husky setup manual
* clarify app README setup notes
* move page tests out of pages/ dir
* Simplifying configs
* extend "prettier"
* format fix
* Updated rules
* Added husky configs and removed debug option
* Removed notes and configuration
* Updated pages
* Added links to readme
* Added example to .prettierignore
* Updated snap
* Make the lint work
Co-authored-by: Luis Alvarez D <luis@vercel.com>
Related to [11014](https://github.com/zeit/next.js/issues/11014)
First and most important, removed the getInitialProps and used getStaticProps.
Then, I refactored Counter, DataList and Examples components.
I have refactored them from class-based components to functional. Also in each component the redux implementation was refactored using the new hooks API, which resulted in ~40% less code.
If you want me to change anything or you are not satisfied with any given change, I'm open to suggestions.
Related to [11014](https://github.com/zeit/next.js/issues/11014)
1. I have changed the component from class to functional.
2. I have removed the getInitialProps and used getStaticProps instead.
3. I have removed the redundant connect to redux @ the index page, due to the fact that now we can dispatch the action with the required hook.
If you want me to change anything or you are not satisfied with any given change, I'm open to suggestions.
Related to [11014](https://github.com/zeit/next.js/issues/11014)
Upgraded all the packages from package.json, removed the saga-wrapper package since it is totally outdated to today's use.
I have refactored the whole example using the new API of the next-redux-wrapper package, using their new support of "getStaticProps".
All of the class components were converted to functional, using the new redux hooks API.
If you want me to change anything or you are not satisfied with any given change, I'm open to suggestions.
Next is currently removing useful information from the PnP error messages.
Before:
```
Module not found: Something that got detected as your top-level application (because it doesn't seem to belong to any package) tried to access a package that is not declared in your dependencies
```
After:
```
Module not found: Something that got detected as your top-level application (because it doesn't seem to belong to any package) tried to access a package that is not declared in your dependencies
Required package: foo (via "foo/components/Avatar")
Required by: /home/arcanis/foo/bar.tsx
```
This addresses #11910 in which `-e default` was not working because there was no example with the name `default`. This PR checks if a user inputted `default` as the example argument for `create-next-app` and if so it will use the local `default` template in the create-next-app directory.
Closes#11910
This waits for the render to be committed to DOM before we render the route change complete event (no longer sync in new React).
We have tests that ensure this resolves.
---
Closes#12938
* Update debugging docs
* typo
* Update docs/debugging.md
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* Update docs/debugging.md
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* Clarify
* Move to advanced features
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
This PR adds support for prepending sass code before the actual entry file.
It's common for developers to import their sass mixins and variables once on their project config so they don't need to import them on every file that requires it. Frameworks like gatsby and nuxt.js already support that handy feature.
The way it works is:
```
/// next.config.js
module.exports = {
experimental: {
sassOptions: {
prependData: `
/// Scss code that you want to be
/// prepended to every single scss file.
`,
},
},
}
```
Fixes#11617 and duplicates
This new documentation page explains how to debug your backend and frontend code in Chrome DevTools/VS Code. This works perfectly with full source map support for both Node.js and React code.
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
