Next.js + Supabase 프로젝트 - (2) Next 프로젝트 생성, 기초 설정
이 포스팅은 "Next.js + Supabase 프로젝트" 시리즈 두 번째 글로, Next.js 프로젝트를 생성하고 Tailwind CSS를 설정하는 과정을 단계별로 안내합니다. postcss.config.mjs 파일과 globals.css에 Tailwind 관련 구성을 추가한 뒤, 개발 서버( npm run dev )를 실행해 Tailwind 적용 여부를 확인하고, 혹시 설정이 제대로 안 됐을 경우 대처 방법도 설명합니다.
프로젝트에 생성된 구조에 대해서는 위의 포스팅에서 간략하게 다루어 보았습니다. 이번에는 Tailwind css 를 next 프로젝트에서 어떻게 사용하는지 확인해보겠습니다
아래 링크는 tailwind css 에서 제공하는 next 에서 tailwind css 를 사용하는 방법에 대한 공식 문서입니다
https://tailwindcss.com/docs/installation/framework-guides/nextjs
Install Tailwind CSS with Next.js
Setting up Tailwind CSS in a Next.js project.
1. 일단 tailwind css 를 사용하기 위해 npm 으로 설치를 해줍니다
npm install tailwindcss @tailwindcss/postcss postcss
2. (확인 후 진행) 루트 폴더에 postcss.config.mjs 파일을 생성합니다 => 이미 만들어져있다면 생략
const config = {
plugins: {
"@tailwindcss/postcss": {},
},
};
export default config;
3. (확인 후 진행) app 폴더의 globals.css 파일에 해당 라인을 추가 => 이미 추가되어있다면 생략
@import "tailwindcss";
4. 이제 세팅이 제대로 되었는지 확인해보기 위해서 localhost 로 띄워 브라우저에서 확인해보시죠
npm run dev
별도의 설정을 하시지 않았다면 localhost:3000 으로 떳을 것입니다. 터미널에 있는 localhost:3000 을 브라우저에 복사 붙여넣거나 command 키를 누른채로 클릭하면 브라우저에서 열리게 됩니다
이런 식으로 잘 떠있다면, 그 다음에는 tailwind css 가 제대로 적용이 되었는지 확인을 해야겠죠.
app 폴더의 page.tsx 파일의 내용을 전부 싸그리 지워버리고
import Image from "next/image";
export default function Example() {
return (
<div className="relative isolate overflow-hidden bg-white px-6 py-24 sm:py-32 lg:overflow-visible lg:px-0">
<div className="absolute inset-0 -z-10 overflow-hidden">
<svg
aria-hidden="true"
className="absolute top-0 left-[max(50%,25rem)] h-256 w-512 -translate-x-1/2 mask-[radial-gradient(64rem_64rem_at_top,white,transparent)] stroke-gray-200"
>
<defs>
<pattern
x="50%"
y={-1}
id="e813992c-7d03-4cc4-a2bd-151760b470a0"
width={200}
height={200}
patternUnits="userSpaceOnUse"
>
<path d="M100 200V.5M.5 .5H200" fill="none" />
</pattern>
</defs>
<svg
x="50%"
y={-1}
className="overflow-visible fill-gray-50"
>
<path
d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M-300.5 600h201v201h-201Z"
strokeWidth={0}
/>
</svg>
<rect
fill="url(#e813992c-7d03-4cc4-a2bd-151760b470a0)"
width="100%"
height="100%"
strokeWidth={0}
/>
</svg>
</div>
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-start lg:gap-y-10">
<div className="lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8">
<div className="lg:pr-4">
<div className="lg:max-w-lg">
<p className="text-base/7 font-semibold text-indigo-600">
Deploy faster
</p>
<h1 className="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
A better workflow
</h1>
<p className="mt-6 text-xl/8 text-gray-700">
Aliquet nec orci mattis amet quisque ullamcorper
neque, nibh sem. At arcu, sit dui mi, nibh dui,
diam eget aliquam. Quisque id at vitae feugiat
egestas.
</p>
</div>
</div>
</div>
<div className="-mt-12 -ml-12 p-12 lg:sticky lg:top-4 lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:overflow-hidden">
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/component-images/dark-project-app-screenshot.png"
className="w-3xl max-w-none rounded-xl bg-gray-900 shadow-xl ring-1 ring-gray-400/10 sm:w-228"
/>
</div>
<div className="lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8">
<div className="lg:pr-4">
<div className="max-w-xl text-base/7 text-gray-700 lg:max-w-lg">
<p>
Faucibus commodo massa rhoncus, volutpat.
Dignissim sed eget risus enim. Mattis mauris
semper sed amet vitae sed turpis id. Id dolor
praesent donec est. Odio penatibus risus viverra
tellus varius sit neque erat velit. Faucibus
commodo massa rhoncus, volutpat. Dignissim sed
eget risus enim. Mattis mauris semper sed amet
vitae sed turpis id.
</p>
<ul
role="list"
className="mt-8 space-y-8 text-gray-600"
>
<li className="flex gap-x-3">
<span>
<strong className="font-semibold text-gray-900">
Push to deploy.
</strong>{" "}
Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Maiores impedit
perferendis suscipit eaque, iste dolor
cupiditate blanditiis ratione.
</span>
</li>
<li className="flex gap-x-3">
<span>
<strong className="font-semibold text-gray-900">
SSL certificates.
</strong>{" "}
Anim aute id magna aliqua ad ad non
deserunt sunt. Qui irure qui lorem
cupidatat commodo.
</span>
</li>
<li className="flex gap-x-3">
<span>
<strong className="font-semibold text-gray-900">
Database backups.
</strong>{" "}
Ac tincidunt sapien vehicula erat auctor
pellentesque rhoncus. Et magna sit morbi
lobortis.
</span>
</li>
</ul>
<p className="mt-8">
Et vitae blandit facilisi magna lacus commodo.
Vitae sapien duis odio id et. Id blandit
molestie auctor fermentum dignissim. Lacus diam
tincidunt ac cursus in vel. Mauris varius
vulputate et ultrices hac adipiscing egestas.
Iaculis convallis ac tempor et ut. Ac lorem vel
integer orci.
</p>
<h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900">
No server? No problem.
</h2>
<p className="mt-6">
Id orci tellus laoreet id ac. Dolor, aenean leo,
ac etiam consequat in. Convallis arcu ipsum urna
nibh. Pharetra, euismod vitae interdum mauris
enim, consequat vulputate nibh. Maecenas
pellentesque id sed tellus mauris, ultrices
mauris. Tincidunt enim cursus ridiculus mi.
Pellentesque nam sed nullam sed diam turpis
ipsum eu a sed convallis diam.
</p>
</div>
</div>
</div>
</div>
</div>
);
}
위 코드를 그대로 복붙해 봅니다. (위의 코드는 tailwindcss 에서 제공하는 코드입니다)
위 와 같이 화면이 바뀌었다면 tailwind css 가 제대로 적용이 된 것입니다!
만일 적용이 안되었다면 두 가지 해보시죠
1) 터미널에서 npm run dev 중이라면 control + c 를 눌러 연결을 종료 후 npm run dev 를 다시 명령해 브라우저에 다시 띄워 확인합니다.
2) vscode 와 같은 코드 에디터를 사용중이라면, 에디터 컴파일 문제가 혹시나 있을 수도 있으니, 종료 후 다시 켜서 1) 을 반복해봅니다
위의 방법들을 실행해도 여전히 오류가 난다면 node, react, next 등의 버전 오류일 수 있으니 에러 내용을 확인후 구글링 하여 해결해보는 방향이 필요합니다
