NextJS 포트폴리오 설정 - 2부

8445 단어 nextjsbeginnerswebdev
last part에서는 우리가 무엇을 지을 것인지에 대해 전반적으로 살펴보았고, 뛰어난 디자인을 찾아서 빌딩 블록으로 분석하는 숙제까지 주었습니다.

이 기사에서는 프로젝트를 설정하고 필요한 모든 종속성을 설치하는 방법을 살펴봅니다.

Next.js 프로젝트 설정



베이직Next.js set up 요즘은 꽤 포워드니까 짚고 넘어가자.

먼저 터미널을 열고 다음 명령을 실행하여 새 Next.js 프로젝트를 만듭니다.

npx create-next-app


완료되면 CLI 프롬프트에서 선택한 이름의 폴더 안에 프로젝트가 설치됩니다.

이 폴더로 이동합니다(제 경우에는 next-portfolio ).

cd next-portfolio


제대로 작동하는지 확인하려면 npm run dev를 실행하여 서버를 시작하십시오.

그러나 Tailwind CSS를 추가하는 방법을 살펴보겠습니다. 첫째, Tailwind는 응용 프로그램을 깔끔하게 스타일 지정하는 쉬운 방법입니다.
익숙하지 않은 경우 일반 CSS를 선택할 수도 있습니다.

먼저 필요한 종속 항목을 설치합니다.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest


그런 다음 다음 명령을 실행하여 tailwind 구성 파일을 초기화합니다.

npx tailwindcss init -p


선호하는 편집기에서 프로젝트를 열고 tailwind.config.js 파일을 찾습니다.
다음과 같이 페이지 및 구성 요소 구성을 content 부분에 추가합니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};


그런 다음 Tailwind 가져오기를 포함하도록 styles/global.css를 수정해야 합니다.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';


그 동안 필요하지 않은 항목도 제거합니다.
  • styles/Home.module.css
  • pages/api
    • pages/index.js 파일을 수정하여 Tailwind가 작동하는지 확인하겠습니다.

    import Head from 'next/head';

export default function Home() {
  return (
    <div>
      <Head>
        <title>NextJS Portfolio</title>
        <meta name='description' content='Generated by create next app' />
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <main className='grid place-content-center min-h-screen'>
        <div className='max-w-xs rounded overflow-hidden shadow-lg my-2'>
          <div className='px-6 py-4'>
            <div className='font-bold text-xl mb-2'>Next + Tailwind ❤️</div>
            <p className='text-grey-darker text-base'>
              Next and Tailwind CSS are a match made in heaven. Check out this
              article on how you can combine these two for your next app.
            </p>
          </div>
        </div>
      </main>
    </div>
  );
}


    이제 npm run dev 앱을 실행하고 http://localhost:3000/를 방문하여 실제로 작동하는지 확인하십시오.



    자, 오늘의 설정입니다!
    프로젝트를 만들고 Tailwind를 추가했습니다.

    Next.js의 레이아웃에 대해 자세히 알아볼 내일 기사를 기대해 주세요.

    오늘의 코드는 GitHub 에서 찾을 수 있습니다.

    읽어주셔서 감사합니다. 연결합시다!



    제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나
    React를 사용한 작업 추적기
    Asterisk18 + Ubuntu로 내선 전화 네트워크 구축

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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