-
Material UI
Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
import * as React from 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import createEmotionServer from '@emotion/server/create-instance'; import theme from '../styles/theme'; import createEmotionCache from '../lib/createEmotionCache'; export default class MyDocument extends Document { render() { return ( {/* PWA primary color */} ); } } // `getInitialProps` belongs to `_document` (instead of `_app`), // it's compatible with static-site generation (SSG). MyDocument.getInitialProps = async (ctx) => { // Resolution order // // On the server: // 1. app.getInitialProps // 2. page.getInitialProps // 3. document.getInitialProps // 4. app.render // 5. page.render // 6. document.render // // On the server with error: // 1. document.getInitialProps // 2. app.render // 3. page.render // 4. document.render // // On the client // 1. app.getInitialProps // 2. page.getInitialProps // 3. app.render // 4. page.render const { renderPage: originalRenderPage } = ctx; // You can consider sharing the same emotion cache between all the SSR requests to speed up performance. // However, be aware that it can have global side effects. const cache = createEmotionCache(); const { extractCriticalToChunks } = createEmotionServer(cache); ctx.renderPage = () => originalRenderPage({ // eslint-disable-next-line react/display-name enhanceApp: (App: any) => (props) => , }); const initialProps = await Document.getInitialProps(ctx); // This is important. It prevents emotion to render invalid HTML. // See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153 const emotionStyles = extractCriticalToChunks(initialProps.html); const emotionStyleTags = emotionStyles.styles.map((style) => ( )); return { ...initialProps, // Styles fragment is rendered after the app and page rendering finish. styles: [ ...React.Children.toArray(initialProps.styles), ...emotionStyleTags, ], }; };
Enter fullscreen mode Exit fullscreen modestep 7
we also need to wrap material UI with the app component, let copy the following lines of code to _app.ts file inside the page folder.
import * as React from 'react'; import Head from 'next/head'; import { AppProps } from 'next/app'; import { ThemeProvider } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; import { CacheProvider, EmotionCache } from '@emotion/react'; import theme from '../styles/theme'; import createEmotionCache from '../../src/lib/createEmotionCache'; // Client-side cache, shared for the whole session of the user in the browser. const clientSideEmotionCache = createEmotionCache(); interface MyAppProps extends AppProps { emotionCache?: EmotionCache; } const App = (props: MyAppProps) => { const { Component, emotionCache = clientSideEmotionCache, pageProps } = props; return ( My page {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} ); }; export default App;
Enter fullscreen mode Exit fullscreen mode
Next.js is a JavaScript open-source framework built on top of Node.js that enables you to build superfast and extremely user-friendly static websites, as well as web applications using React. React documentation mentions Next.js among "Recommended Toolchains" advising it to developers as a solution when "building a server-rendered website with Node.js.
Related posts
-
Adding Client Components to NextJS
-
The Ultimate Comparison: Ant Design vs Material# Ant Design vs Material UI: Which React UI Library to Choose
-
MUI finally adds "use client" to their components, but...
-
React and Vite - Why is still loading other component not imported
-
Please Grill Me On My React "Take Home Assessment"