Nextjs 보일러 프로젝트 생성 뼈대

1. tsconfig.json 설정

2. prettier 설정

 

3. sass 설치

npm i sass




공식문서 참고 -https://nextjs.org/docs/messages/install-sass

 

4. tailwind.css 설치

https://tailwindcss.com/docs/guides/nextjs

Install Tailwind CSS with Next.js - Tailwind CSS

tailwind.config.js

const plugin = require('tailwindcss/plugin');

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: [
		'./pages/**/*.{js,ts,jsx,tsx}',
		'./components/**/*.{js,ts,jsx,tsx}',
	],
	theme: {
		extend: {
			color: {
				primary: '#5F3DF7',
			},
			transitionTimingFunction: {
				DEFAULT: 'ease-in-out',
			},
			transitionDuration: {
				DEFAULT: '350ms',
			},
		},
	},
	plugins: [
		plugin(({ addUtilities }) => {
			addUtilities({
				'.flex-center-between': {
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'space-between',
				},
				'.flex-center-center': {
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center',
				},
			});
		}),
	],
};

 

 

전체 구조