[DAY - 100] Next.js 기초

Next는 React 기반의 프레임워크인데 서버에서 정보를 받아와 스크립트로 웹 화면을 출력해주는 React의 단점을 보완하기 위해 사용한다.

 

클라이언트에서 직접 렌더링을 하지 않고 서버에서 렌더링을 한 후 클라이언트에 보내주기 때문에 첫 페이지의 출력 속도가 빠르다.

또한 API라우트 사용에 있어서 서버리스 함수를 사용할 수 있기 때문에 서버 없이 백엔드 처리를 할 수 있다.

 

https://nextjs.org/blog/next-13

Next.js 13

 

1) Next.js 설치

 

https://nextjs.org/docs/app/api-reference/create-next-app

API Reference: create-next-app | Next.js

 

 

명령어로 Next를 설치할 때 여러 옵션을 선택할 수 있는데 Typescript와 호환이 좋기 때문에 옵션에도 나와있다.

 

What is your project named?  my-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

 

2) Next.js 라우팅

 

Next.js의 라우팅의 경우 폴더 형식으로 구분되어있다.

따라서 각각의 폴더에 js파일을 만들어 놓으면 알아서 경로를 찾아 간다.

 

 

https://nextjs.org/docs/app/building-your-application/routing/defining-routes

Routing: Defining Routes | Next.js

next

next

 

3) Next.js style 적용

 

style의 경우 태그에서 class명을 중괄호로 묶은 뒤 import한 파일을 넣어준다.

ul의 class명이 styles.list이므로 css를 작성할 때 .list { } 로 작성하면 적용이 된다.

 

* 하지만 이 방식의 경우 클래스를 두 개 이상 작성하면 안된다. (태그는 경로에 써도 괜찮다.)

 

.inner .list { } - X
.list { } - O

.list .item { } - X
.list li { } - O

style

// css 파일 import

import styles from './post.module.css'


const Post = () => {
    const post = use(getData())
    
    return (
        <section className='con'>
            <div className="inner">
                <h2>비동기 post</h2>
                
                // css 파일의 style 적용
                
                <ul className={styles.list}>
                    {
                        post.map(item=>
                            <PostItem key={item.id} item={item}/>
                            )
                    }
                </ul>
            </div>
        </section>
    );
};

export default Post;

.list li {
    border: 1px solid gray;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: none;
}
.list li:last-child {
    border-bottom: 1px solid gray;
}
.list li h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.list li p {
    font-size: 18px;
}