Next.js

Steps to install

Create a Next.js project

terminal

npx create-next-app@latest project-name

You will be prompted with a series of questions. Select the following options:

terminal

✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS?
✔ Would you like your code inside a `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for `next dev`? … No
✔ Would you like to customize the import alias (`@/*` by default)? … No
✔ What import alias would you like configured? … @/* … Yes

After the project is created, head to the project root:

terminal

cd project-name

Install packages

npm i @govtechmy/myds-react @govtechmy/myds-style

Configure CSS stylesheet

You may configure the styling through one of (2) methods listed below.

1. CSS import

app/global.css

@import "@govtechmy/myds-style/full.css";

2. Tailwind CSS

Please read the Style Configuration for more advanced configuration.

Start using the components!

Here is a <Button /> for you to get started!

components/button.tsx

"use client"; // For Next App Router, must include this line
import { Button } from "@govtechmy/myds-react/button";
 
export default () => {
  return <Button variant="primary-fill">Hello MYDS</Button>;
};

Important

MYDS components are built for the client-side, while Next.js App router is server rendered by default.

To tell Next.js to render the component client side, you must include the use client directive in the component file. For Next.js Page router, you may omit the directive.

app/page.tsx

import Button from "../components/button";
 
export default function Home() {
  return (
    <div>
      <Button />
    </div>
  );
}

Next.js

Steps to install

Create a Next.js project

Install packages

Configure CSS stylesheet

Start using the components!

On this page