mhmdbhsk / warung

An E-Commerce front-end template, fully customizable and fast performance

Next.js with TypeScript example

How to use

Download the example or clone the repo:

curl https://codeload.github.com/mui-org/material-ui/tar.gz/next | tar -xz --strip=2  material-ui-next/examples/nextjs-with-typescript
cd nextjs-with-typescript

Install it and run:

npm install
npm run dev

or:

The idea behind the example

The project uses Next.js, which is a framework for server-rendered React apps. It includes @material-ui/core and its peer dependencies, including emotion, the default style engine in Material-UI v5. If you prefer, you can use styled-components instead.

The link component

Next.js has a custom Link component. The example provides adapters for usage with Material-UI.

• The first version of the adapter is the NextLinkComposed component. This component is unstyled and only responsible for handling the navigation. The prop href was renamed to.

  import Button from '@material-ui/core/Button';
  import { NextLinkComposed } from '../src/Link';
  
  export default function Index() {
    return (
      <Button
        component={NextLinkComposed}
        to={{
          pathname: '/about',
          query: { name: 'test' },
        }}
      >
        Button link
      </Button>
    );
  }

• The second version of the adapter is the Link component. This component is styled, it leverages the link component of Material-UI with NextLinkComposed.

  import Link from '../src/Link';
  
  export default function Index() {
    return (
      <Link
        href={{
          pathname: '/about',
          query: { name: 'test' },
        }}
      >
        Link
      </Link>
    );
  }