Co-authored-by: JJ Kasper <jj@jjsweb.site>
Co-authored-by: Matt Kane <m@mk.gg>
Co-authored-by: Ismael <ismael.rumzan@gmail.com>
Co-authored-by: Balázs Orbán <info@balazsorban.com>
By making `NextPageWithLayout` generic and passing the type parameters to `NextPage`, our pages can continue to specify the props explicitly. This gives us type safety in `getInitialProps`, for example.
## 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
- [x] Make sure the linting passes by running `yarn lint`
* Added type to Page Component for TypeScript
Following this tutorial, I noticed that TS was complaining that "getLayout" did not exist on Page. That is normal since Page is typed as NextPage. I simply exported the new type we create in "_App.tsx" and used it as the return type for Page. This will probably help others seeing that red in their editors and perhaps being confused.
* Small linting change
* Apply suggestions from code review
* Update layouts.md
* lint fix
* update type
Co-authored-by: JJ Kasper <jj@jjsweb.site>
The [correct](https://www.grammarly.com/blog/et-cetera-etc/) way to use et cetera is to put a period right after and a comma behind it if it's being used as a list. I updated the occurrences in the docs and examples that didn't match these rules.
## Documentation / Examples
- [x] Make sure the linting passes
## Explanation
Fixes#27465
I added some docs on how to use per page persistent layouts in TypeScript as this requires you to extend some types and it might not be trivial if you are just starting out with TypeScript.
I copied the js example so it might be better to remove some of the duplication where possible, let me know.
All feedback is welcome
## Documentation / Examples
- [x] Make sure the linting passes
Fixes#27252 by using a named function rather than an arrow function. If this is the correct fix, then modifications are also needed for the `layout-component` example, but I'm just providing this one modification right now in case this fix is incorrect.
- Helps clear up customer confusion about how to share React state with layouts, including nested layouts
- Provides guidance on best practices before shipping your application to production
Open to any feedback!
