next.js + typeScript + boothStrap + module.css 셋업방법

 

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app -- --ts

 

npm install bootstrap
npm install react-bootstrap bootstrap
npm install --save @types/bootstrap
or
yarn add bootstrap
yarn add react-bootstrap bootstrap
yarn add --save @types/bootstrap

// _app.tsx
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { useEffect } from 'react'
import 'bootstrap/dist/css/bootstrap.css'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import { useEffect } from 'react'
// import styles from '../styles/Home.module.css'
import { Button } from 'react-bootstrap'
import styles from '../styles/css/Home.module.css'

const Home: NextPage = () => {
  return (
    <>
      <div className={`container-sm ${styles.container}`}>
        100% wide until small breakpoint
      </div>
      <Button variant="outline-primary">Primary</Button>{' '}
      <Button variant="outline-secondary">Secondary</Button>{' '}
      <Button variant="outline-success">Success</Button>{' '}
      <Button variant="outline-warning">Warning</Button>{' '}
      <Button variant="outline-danger">Danger</Button>{' '}
      <Button variant="outline-info">Info</Button>{' '}
      <Button variant="outline-light">Light</Button>{' '}
      <Button variant="outline-dark">Dark</Button>
    </>
  )
}

export default Home

// ../styles/css/Home.module.css

.container {
  background-color: black;
	color: aliceblue;
}