Add example with link to oficial example of "Material-ui with Typescript" #37499
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
henriqueholtz
requested review from
timneutkens,
ijjk,
shuding,
leerob,
steven-tey and
balazsorban44
as code owners
balazsorban44
requested changes
Jun 14, 2022
There was a problem hiding this comment.
We already have a Material UI example, let's just add a link to that README: https://github.com/vercel/next.js/tree/canary/examples/with-material-ui
* avoid unnecessary router state changes * refine compare function * check hasOwnProperty Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
* Enable externalHelpers swc option * disable with pnp
This will allow us to track base middleware size in our PR stats.
## Bug - [X] Related issues linked using `fixes #37483` - [ ] Integration tests added - [x] Errors have helpful link attached, see `contributing.md` Duplicate locales will lead to an obscure error message at build time, here I caught them earlier. Using a Set sounded the terser and fastest approach, but it won't tell which locale is duplicated. Also I've noticed that the "Array.isArray" check happens twice on i18n.locales? Maybe it's on purpose? Fixes #37483 Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
This commit lets users measure their Interaction to Next Paint [INP](https://web.dev/inp/) web vital. Note that the `web-vitals` package is beta to denote that INP is an experimental metric, the code is stable and v3 is backwards compatible. `web-vitals` CHANGELOG for v3: - [BREAKING] Report TTFB after a bfcache restore - [BREAKING] Only include last LCP entry in metric entries - Add support for the new INP metric - Rename getXXX() functions to onXXX() - Add a navigationType property to the Metric object See https://github.com/GoogleChrome/web-vitals/blob/next/CHANGELOG.md Upgraded `playwright-chromium` from `1.14.1` to `1.17.2` because the Events Timing API used to measure INP is only available in Chromium >= v98. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint`
I noticed this line was not used in the standalone server:  ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
* Update to latest version of @swc/helpers * update lock
…37540) There was a bug that ignored `Request` options when one was given to the `fetch` function: ```ts const request = new Request("https://example.vercel.sh", { method: "POST" }); await fetch(request); ``` The code above was expected to make a `POST` request, but instead it made a `GET` request. This commit fixes it and adds some tests to verify that fetching with a `Request` object works as expected, and therefore resolves #37123. ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md`
* rewrite head side effects component in hooks * remove mapping from element to children in head manager since they're already the children of `<Head>` When move `SideEffect` to hooks, the effects scheduling is earlier than life cycle. We're leverage layout effects and effects at the same time, always cache the latest head updating function in head manager in layout effects, and flush them in the effects. This could help get rid of the promises delaying approach in head manager. Co-authored-by: Shu Ding <3676859+shuding@users.noreply.github.com>
## Bug fixes #37106 Please note that, as for `pages/` the `src/middleware` file is ignored when `/middleware` is present. ## How to test 1. Rebuild next.js `pnpm build` 2. Run dedicated tests: `pnpm testheadless --testPathPattern middleware-src/`
* Refactor data fetching to support getting headers * Relax `getNextPathnameInfo` type * Add test for middleware internal redirects * Export `ParsedRelativeUrl` type * Refactor `getMiddlewareEffects` * Move rewrite i18n test to middleware rewrite tests * Fix bug parsing pathname info * Normalize data requests to page requests for middleware * Ensure there is a header `x-nextjs-matched-path` for middleware rewrites on data requests * Extract `getDataHref` to a function * Stop using `getDataHref` for flight * Always set the query in `dataHref` independently of if it is SSG * Add test for recursive rewrites * Refactor dynamicPath validation to `matchHrefAndAsPath` * Add `dataHref` to `FetchDataOutput` * Extract `matchesMiddleware` function * Add `hasMiddleware` option to `fetchNextData` * Move preflight test * Remove preflight test * Add middleware prefetch tests * Remove preflight * Attempt to reduce bundle size Include `withMiddlewareEffects` and `matchHrefAndAsPath` into `router` Bring `getDataHref` back to `page-loader` Bring `resolveDynamicRoute` back to `router` * Reduce arg duplication for `withMiddlewareEffects` * Remove some async/await and spreads to reduce bundle size * Upgrade `edge-runtime` & clone `Request` on redirects to mutate headers * Add some rewrite tests Co-authored-by: Kiko Beats <josefrancisco.verdu@gmail.com> Co-authored-by: JJ Kasper <jj@jjsweb.site>
* fix(eslint): next/server error when next is not in the root * chore: fix lint issue and posix compatibility * chore: make it portable
* chore: reworks nested middleware error message * chore: fix invalid path in nested middleware error message * Update to show nested middleware error together * update Co-authored-by: JJ Kasper <jj@jjsweb.site>
This PR adds new information to the Next.js deployment documentation to highlight examples or guides for deploying Next.js to a handful of services. This builds on the existing documentation around the Next.js Build API (from `next build`) and options for self-hosting with Node.js or Docker. ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [x] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
This PR moves the internal logic associated with `req.ua` into an explicit method the user should to call to have the same behavior.
**before**
```typescript
// middleware.ts
import { NextRequest, NextResponse } from 'next/server'
export function middleware(request: NextRequest) {
const url = request.nextUrl
const viewport = request.ua.device.type === 'mobile' ? 'mobile' : 'desktop'
url.searchParams.set('viewport', viewport)
return NextResponse.rewrites(url)
}
```
**after**
```typescript
// middleware.ts
import { NextRequest, NextResponse, userAgent } from 'next/server'
export function middleware(request: NextRequest) {
const url = request.nextUrl
const { device } = userAgent(request)
const viewport = device.type === 'mobile' ? 'mobile' : 'desktop'
url.searchParams.set('viewport', viewport)
return NextResponse.rewrites(url)
}
```
This potentially will save the extra 17 kB related to the size of `ua-parser-js`
…37556) This commit enables the following patterns in Middleware: ```ts // with a dot notation const { ENV_VAR, "ENV-VAR": myEnvVar } = process.env; // or with an object access const { ENV_VAR2, "ENV-VAR2": myEnvVar2 } = process["env"]; ``` ### Related - @cramforce asked this fixed here: #37514 (comment) ## Feature - [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md`
This ensures we use the correct dynamic route params favoring params from the URL/matched-path over route-matches. This also ensures we properly cache `_next/data` requests client side when the page is not a `getServerSideProps` page. x-ref: #37574 ## Bug - [ ] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
…with mux-player-react (#37621) * Update upchunk to latest (2.3.1). * Add mux-player package to package.json * WIP: Make VideoPlayer return mux-player * Remove unused code from prev video player * Use mux-player-react directly * Fix import line for mux-player-react * chore: fix lint issues
* Re-introduce Edge API Endpoints This reverts commit 210fa39, and re-introduces Edge API endpoints as a possible runtime selection in API endpoints. This is done by exporting a `config` object: ```ts export config = { runtime: 'edge' } ``` Note: `'edge'` will probably change into `'experimental-edge'` to show that this is experimental and the API might change in the future. * Support `experimental-edge`, but allow `edge` too Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
* Allow passing FileRef directly to createNext * update type
…37625) In a previous PR (#34075), the ISR behavior was introduced to the Image Optimization API, however it changed the cache-control header to always set maxage=0. While this is probably the right behavior (the client shouldn't cache the image), it introduced a regression for users who have CDNs in front of a single Next.js instance (as opposed to [multiple Next.js instances](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#self-hosting-isr)). Furthermore, the pros of client-side caching outweight the cons because its easy to change the image url (add querystring param for example) to invalidate the cache. This PR reverts the cache-control behavior until we can come up with a better long-term solution. - Fixes #35987 - Related to #19914 - Related to #22319 - Closes #35596
* Adds consistency to ESLint rules. * Fixes lint errors. * Fixes manifest. * Adds missing title. * Fixes copy / paste error. Co-authored-by: Lee Robinson <me@leerob.io> * Update errors/no-script-in-document.md Co-authored-by: Lee Robinson <me@leerob.io> * Update errors/no-sync-scripts.md Co-authored-by: Lee Robinson <me@leerob.io> * Updates a couple of rule descriptions. * Adds redirects. * Fixes unit tests. * Removes duplicated section. * Updates `no-before-interactive-script-outside-document` description. * Fixes lint. * Fixes integration tests. * Adds description to `no-before-interactive-script-outside-document` documentation. * Removes `link-passhref` from rules list. * Updates remaining `pages/_middleware.js` references. * Adds consistancy to messaging in new `no-styled-jsx-in-document` rule. * Apply suggestions from code review * Apply suggestions from code review Co-authored-by: Lee Robinson <me@leerob.io> Co-authored-by: Tim Neutkens <tim@timneutkens.nl> Co-authored-by: JJ Kasper <jj@jjsweb.site>
…#37672) * Ensure custom middleware matcher is used correctly in client manifest * lint-fix * patch e2e case * fix rsc case * update test * add missing normalize
The Contributing guidelines say TypeScript should be leveraged for new examples, so I thought I'd convert this example over. I also: - Upgraded all dependencies - Replaced the `prop-types` package with TypeScript types ## Documentation / Examples - [X] Make sure the linting passes by running `pnpm lint` - [X] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
`with-docker-compose` contains everything needed to get Next.js up and running with Docker Compose. This example aims to provide an easy-to-use, Next.js app development and production environment, **all without Node.js being installed** on the host machine. This ensures a consistent development environment across Windows, MacOS, and Linux teams. I was inspired to create this, because the existing [with-docker](https://github.com/vercel/next.js/tree/canary/examples/with-docker) example only uses Docker to build the final production artifacts, not provide a development environment. Docker Compose easily syncs changes with containers for Hot Reloading, parallel builds, and networking, making it a powerful and consistent development tool. Developers can **easily extend this example** by modifying the YAML files to include Nginx, Postgres, and other Docker images. This example takes advantage of Docker multistage builds combined with the Next 12.1 [Output Standalone](https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files-experimental) feature, to create up to **80% smaller apps** (Approximately 110 MB compared to 1 GB with create-next-app). I also included an example without multistage builds, for developers who don't want to get into the weeds. I have been tweaking this Docker Compose setup over 3 years of real world use, but please let me know if anything can be improved.
…ith Typescript on README from "with-material-ui" folder
ijjk
added
create-next-app
@balazsorban44 Thanks for this appointment. I've update my branch, and apply your suggestion into this commit Please let me know if it's ok from now. Thanks! |
|
Hi, it looks like you accidentally did a lot of changes to the core. These should be reverted, as the only file that needs to change is this one: https://github.com/vercel/next.js/blob/canary/examples/with-material-ui/README.md If it's easier, you can close this PR and create a new one with only the necessary changes. |
Comment on lines
+3
to
+5
| ### 1 - [Oficial example - ( Javascript )](https://github.com/mui/material-ui/tree/master/examples/nextjs) | ||
|
|
||
| ### 2 - [Oficial example - ( Typescript )](https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript) |
There was a problem hiding this comment.
Suggested change
| ### 1 - [Oficial example - ( Javascript )](https://github.com/mui/material-ui/tree/master/examples/nextjs) | |
| ### 2 - [Oficial example - ( Typescript )](https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript) | |
| These examples are maintained outside of the Next.js repository: | |
| 1. Official [TypeScript example](https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript) | |
| 2. Official [JavaScript example](https://github.com/mui/material-ui/tree/master/examples/nextjs) |
Let's recommend TypeScript first. 👍
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Documentation / Examples
I'm following this similar example folder examples/with-material-ui