[docs] Add a next.js demo with hooks

[oliviertassinari]

Closes #13773

[virzak]

Thanks for that!!!

What's the significance of

// Use the same helper as Babel to avoid bundle bloat.
import { install } from '@material-ui/styles';

install();

Tried to remove import '../src/bootstrap'; and didn't see anything different.

Also, I converted this example into typescript. Let me know if you would like a PR.

[oliviertassinari]

@virzak The install() call makes the core components use the new styles implementation. We can add a comment about it. We have a create-react-app example with TypeScript. Is that enough?

[virzak]

I can only speak for myself, but any time I get a sample of a base library, I convert it to typescript. There is a lot of code in next.js (most notably _document.tsx and _app.tsx) which is not covered by the create-react-app example. Also I just find that typescript forces you to produce cleaner code.

Here is the repo: https://github.com/virzak/material-ui-nextjs-hooks-typescript

Added:

• PageContext interface
• children property

Issues:

• Not entirely sure what to do in App constructor
• pageContext needs to be cast at PageContext for some reason, even though it is never undefined. Not sure if there is a good way to avoid it.

[virzak]

So what you're saying is import '../src/bootstrap'; is not necessarily needed? Does it make a difference for the users of the library if core components use the old implementation?

Also does the import order matter? ts-lint wants all imports sorted alphabetically.

[oliviertassinari]

@eps1lon What do you think of a next.js example using TypeScript?

@virzak The import order matters. Yes, it's important to call it with server-side rendering. It's allowing the collection of the CSS and might prevent a classnames clash issue.

[eps1lon]

We could merge the example from @virzak into the main repo no objection here if he wants to work on that. Glanced over the repo quickly and it looked fine to me with some minor issues.

[oliviertassinari]

@virzak It looks like we have a green light for this TypeScript demo :) 💚 .

[Skaronator]

This shouldn't be necessary from my understanding since we import this already in _app.js and _app.js is executed on client and server.

[oliviertassinari]

Console log the execution order between the client and the server, it's different. We need to call it first. At least, until v4 is out.