Create NextApp with Typescript
npx create-next-app@latest --ts
# or
yarn create next-app --typescript프로젝트가 만들어지고 폴더가 생기면 해당 프로젝트 폴더로 이동
Install TailwindCSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Configure template paths
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
tailwindcss의 config 추가
Add the Tailwind directives to your CSS
/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html, body {
@apply p-0 m-0
}
a {
@apply no-underline
}
* {
@apply box-border
}
}./styles/Home.module.css 파일은 삭제
./pages/index.tsx 파일을 아래와 같이 수정 후 npm run dev 하면 초기 세팅완료
import type { NextPage } from 'next'
const Home: NextPage = () => {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}
export default Home
(+ 만약 ESLint: TypeError: this.libOptions.parse is not a function 에러가 발생한다면 아래 참조)
ESLint: TypeError: this.libOptions.parse is not a function
I was getting started with Next.js on WebStorm 2022.2.1 Build #WS-222.3739.57. I created a new Next.js project with TypeScript enabled, and that's all. The error is shown below: TypeError: this.
stackoverflow.com
참고자료
Basic Features: TypeScript | Next.js
Next.js supports TypeScript by default and has built-in types for pages and the API. You can get started with TypeScript in Next.js here.
nextjs.org
Install Tailwind CSS with Next.js - Tailwind CSS
Documentation for the Tailwind CSS framework.
tailwindcss.com
+추가 자료
Eslint + Prettier 설정
[NextJS / Typescript] Eslint + Prettier 설정 후 husky로 자동화하는 법
npx eslint --init 터미널을 키고 위 명령어를 입력하여 .eslintrc.js 파일 만들기 위와 같이 질문에 체크하면 된다. 중간에 Which style guide do you want to follow?에는 에어비엔비 스타일로 해도되고 취향것..
kbwplace.tistory.com
Web을 App처럼 보이게 하는 법 (WebView 사용 시 필독)
[Web / CSS] WebView 버튼 클릭 시 생기는 파란색 박스 해결 (웹을 앱처럼 보이게 하는 법)
스마트폰으로 웹페이지를 둘러볼 때 웹페이지가 App 스럽지 못하다는 생각을 해본적이 있을 것이다. 이는 테두리와 박스 때문이다. 또한 링크나 이미지를 길게 누르면 주소를 복사하거나 이미지
kbwplace.tistory.com