Vercel/Next.js와 Mui로 자신의 사이트를 만들다

11530 단어 react

CNA 와 page/index.js の確認




kaede0902@rooter code % npx create-next-app@latest
Need to install the following packages:
  create-next-app@latest
Ok to proceed? (y) y
✔ What is your project named? … kaede-site
Creating a new Next.js app in /Users/kaede0902/code/kaede-site.


CNA가 만든



すぐできた

import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>kaede site</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.js</code>
        </p>
      </main>
    </div>
  )
}


index.js 이고의 신프르나코드로



ここまで表示される

GitHub 와 Vercel 에 배포



https://github.com/kaede0902/kaede-site

GitHub 에 푸시 完了

https://vercel.com/kaede0902/kaede-site

Vercel 에 Deploy 完了

https://vercel.com/kaede0902/kaede-site

管理画面はこれ

https://kaede-site.vercel.app/

先はこれ 배치

MUI を導入する



https://itnext.io/next-js-with-material-ui-7a7f6485f671

itnext에 よれば、

There are some requirements we should do to use material UI in next.js projects.
1- Fixing the resolution order
2- Removing the server side injected CSS


とある.document.js をいじって　CSS の読み込みを調整しなければいけないらしい.

実際に入れてみる

npm i @material-ui/core
added 32 packages, and audited 517 packages in 10s


これで index.js 에 書く

import Button from '@material-ui/core/Button';
        <Button variant="contained" >sample</Button>


これ로



灰色のボtanが表示された

아이콘 を入れる



core とが再度必要

npm i @material-ui/icons

added 1 package, and audited 518 packages in 7s




        <Button
          variant="contained"
          size='large'
        > 
          Buy me a coffee! 
          <EmojiFoodBeverageIcon />
        </Button>


로키타.



ボtanの色を変える




        <Button
          variant="contained"
          size='large'
          color="warning"
        >


これでも灰色のま

        <Button
          href={wishListUrl}
          variant="contained"
          size='large'
          style={{
            background: 'yellow',
          }}
        >
          Buy me a coffee!
          <EmojiFoodBeverageIcon />
        </Button>


これで実装できた

site에 反映させる



push しただけで反映される

https://kaede-site.vercel.app/



로키타.

次は Hatena とこの dev to のbrogroのlinkを貼るボtanを作る

discord 의 아이콘 を入れる





MUI는 하지 않는다

こっちと探す

https://icon-sets.iconify.design/mdi/discord/

npm install --save-dev @iconify/react
import { Icon } from '@iconify/react';
<Icon icon="mdi:discord" />


@mui/icons-material/LogoDev の dev.to の アイコンを入れる


@emotion/react, @emotion/styled , の依存関係があ た.

import LogoDevIcon from '@mui/icons-material/LogoDev';


公式사이트の表記を入れる



https://shinmizutani.site/

Twitter見たら出てきたこの人のsiteを真似する



        <Typography variant="caption" display="block" gutterBottom>
          エンジニア
        </Typography>
        <Typography variant="h4" gutterBottom component="div">
          カエデ (kaede0902)
        </Typography>
        <Typography variant="h5" gutterBottom component="div">
          公式サイト
        </Typography>

        <p className={styles.description}>

        </p>

        <Typography variant="caption" display="block" gutterBottom>
          Web Developer
        </Typography>
        <Typography variant="h4" gutterBottom component="div">
          kaede (kaede0902)
        </Typography>
        <Typography variant="h5" gutterBottom component="div">
          Offical Web Site
        </Typography>
        <p className={styles.description}>
          WELCOME.
        </p>


타이포그래피.
Coursera 오은달 머신러닝 과정 2주 차 작업 코드
간과하기 쉬운 이상 문제

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage