미미의 메모장

[Next.js] 프로젝트 셋업 본문

memo/Front-End💙

[Next.js] 프로젝트 셋업

mimi memo 2023. 6. 22. 11:17

원하는 폴더에에서 아래 명령어 실행

https://nextjs.org/docs/getting-started/installation

npx create-next-app@13.2.4 --experimental-app

tailwindcss 추가 (참고: https://tailwindcss.com/) ==> 최신 버전은 이미 포함 되어 있다.

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

src directory 사용하므로 tailwind.config.js에 content에 추가 해주기

["./src/**/*.{html,js,ts,jsx,tsx}"]

globals.css 에 추가

@tailwind base;
@tailwind components;
@tailwind utilities;

page.module.css 파일 삭제 후,

yarn dev

 

public 폴더 안에 svg 파일 세 개 삭제

 

 

font 사용법

import "./globals.css";
import { Open_Sans } from "next/font/google";

const openSans = Open_Sans({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={openSans.className}>
      <body>{children}</body>
    </html>
  );
}

'memo > Front-End💙' 카테고리의 다른 글

[Websocket] 웹소켓  (0) 2023.11.22
[Typescript] 기본  (1) 2023.11.09
[Next.js] Headless CMS란?  (0) 2023.06.19
[Next.js] 사용한 라이브러리  (0) 2023.06.09
[Next.js] 서버 컴포넌트 / 클라이언트 컴포넌트  (0) 2023.06.09
'memo/Front-End💙' Related Articles more