next.js study

------------- 학습목표
1. next.js 프로젝트 설치 with 명령어
2. next.js 생성된 폴더 구조
3. next.js 사이트
4. next.js 프로젝트 구조
5. Building Your Application

------------- 실습

1. next.js 프로젝트 설치 with 명령어 : npx create-next-app@latest

C:\dev\frontend>npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.3
Ok to proceed? (y)

> npx
> create-next-app

√ What is your project named? ... next-react-app
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes
Creating a new Next.js app in C:\dev\frontend\next-react-app.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next


added 358 packages, and audited 359 packages in 27s

133 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created next-react-app at C:\dev\frontend\next-react-app


C:\dev\frontend>

2. 생성된 폴더 구조

3. next.js 사이트

   https://nextjs.org/

4. next.js 프로젝트 구조

5. Building Your Application

    Routing
    Data Fetching
    Rendering
    Caching
    Styling
    Optimizing
    Configuring
    Testing
    Authentication
    Deploying
    Upgrading

5.1. Routing

.
..

5.2 Data Fetching
5.3 Rendering
5.4 Caching

5.5 Styling

Tailwind CSS

	Installing Tailwind

      npm install -D tailwindcss postcss autoprefixer
      npx tailwindcss init -p

---

      C:\dev\frontend\next-react-app>npm install -D tailwindcss postcss autoprefixer

      added 8 packages, and audited 367 packages in 2s

      137 packages are looking for funding
        run `npm fund` for details

      found 0 vulnerabilities

      C:\dev\frontend\next-react-app>npx tailwindcss init -p

      > next-react-app@0.1.0 npx
      > tailwindcss init -p


      Created Tailwind CSS config file: tailwind.config.js
      Created PostCSS config file: postcss.config.js

      C:\dev\frontend\next-react-app>	

5.6 Optimizing
5.7Configuring
5.8 Testing
5.9 Authentication
5.10 Deploying
5.11Upgrading