NEXT.js> 레이아웃 링크 및 CSS

YU YU·2021년 7월 26일
1

경일_React+NEXT.js

목록 보기
2/5
post-thumbnail

동적 Routing

(앞으로 더 배워야함)

[post.jsx]
import {useRouter} from 'next/router'

const Post =()=>{
    const router= useRouter()
    const {post} = router.query
    return (
        <>
        {post} Post.jsx
        </>
    )
}
export default Post

{post}라 쓰여진 부분이 주소창 뒤에 쓰여진 내용들로 대체된 것을 알 수 있다.

레이아웃 만들기

NEXT.js에서도 Node.js의 nunjucks처럼 레이아웃을 만들 수 있다.
레이아웃에서 반복되는 부분은 components 폴더에 만들어준다.

[BlogLayout.jsx]
const BlogLayout=({children})=>{
    return(
        <>
        <div className="header">
            <h1>로고</h1>
            <ul>
                <li>HOME</li>
                <li>글쓰기</li>
                <li>로그인</li>
                <li>회원가입</li>
            </ul>
        </div>
        <div className ="contain">{children}</div>
        <div className = "footer">  
            카피라이트 어쩌구 저쩌구...</div>
        </>
    )


}
export default BlogLayout
[FormLayout.jsx]
const FormLayout =({children})=>{
    return(
        <>
        <div className ="contain">
        {children}
        </div>
        <div className = "footer">  
            카피라이트 어쩌구 저쩌구...</div>
        </>
    )
}
export default FormLayout

이런식으로 적용하면 그 내용이 layout의 children안에 들어가게 된다.


그 외 다른 페이지도 된다! Node.js의 nunjucks에서 includ로 render했던 부분을 여기서는 이렇게 할 수 있다!

폴더구조

[post.jsx]
import BlogLayout from '../../components/BlogLayout'
import {useRouter} from 'next/router'

const Post =()=>{
    const router= useRouter()
    const {post} = router.query
    return (
        <BlogLayout>
        {post} Post.jsx
        </BlogLayout>
    )
}
export default Post

레이아웃도 여러개 만들 수 있다. 그리고 대에 따라 적용하면 편하다.^^
레이아웃이 하나만 있으면 공장에서 찍어내는 느낌이 들고, 여러개 있으면 다양성이 있다. 실제로 네이버같은 경우도 로그인을 누르면 다른 페이지로 넘어가게 되어 있다.

링크 걸기

React와 NEXT.js는 링크 문법이 다르다.

React=><Link to "/">menu1
NEXT.js=>menu1

import Link from 'next/link'

const BlogLayout=({children})=>{
    return(
        <>
            <div className="header">
                <h1>로고</h1>
                <ul>
                    <li>
                        <Link href ="/" ><a>HOME</a></Link></li>
                    <li><Link href ="/posts/" ><a>글쓰기</a></Link></li>
                    <li><Link href ="/user/login" ><a>로그인</a></Link></li>
                    <li><Link href ="/user/join" ><a>회원가입</a></Link></li>
                </ul>
            </div>
            <div className ="contain">
            {children}
            </div>
            <div className = "footer">  
                카피라이트 어쩌구 저쩌구...</div>
        </>
    )


}
export default BlogLayout

router기능 이용하기

import Router from 'next/router'
<button onClick={()=>Router.back()}>뒤로가기
뒤로가기
이렇게 쓰면 된다.

뒤로가기 버튼이 앞으로 많이 쓰일 것이다.

head 태그 바꾸기

참고>https://velog.io/@byeol4001/Meta-Tag-OG%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
Next.js에는 index.html이 없다. 그런데 우리는 meta태그나 title태그를 바꿔야 할 때가 많다. 이럴때는 Next.js에서 바꿀 수 있는 component를 제공해준다.
import Head from 'next/head'
를 선언하고, component에 return부분에 부분을 넣고 해주면 된다.
즉, <Head><title>YuYu's Blog</Head>해주면 된다.

import BlogLayout from '../components/BlogLayout'

import Head from 'next/head'


const App=()=>{
    return(
        <>  
            <Head>
                <title>YuYu's Blog</title>
            </Head>
            <BlogLayout>
            Hello NEXT.js
            </BlogLayout>
        </>

    )
}

export default App

이 기능은 app.jsx넣는것이 제일 좋다. 각각 다르게 하려면 각 페이지에 넣는 것도 나쁘지 않다.

font넣기

https://fonts.google.com/에 접속해서 마음에 드는 폰트를 선택한다.


저 부분을 긁어서 _app.jsx파일에 넣는다.

_app.jsx

_app.jsx
NEXT.js에서는 app.jsx파일이 없어도 작동이 된다. 그런데 메타태그 같은 head안에 있는 태그들을 바꾸고 싶을 때가 있다. 그러면 _app.jsx파일을 생성한다. _app.jsx파일은 모든 컴포넌트가 실행되기 전에 실행되는 파일이다. (거쳐간다는 이미지)(NEXT.js에서 이름을 이미 정해주어서 임의로 바꿀 수 없다. )

여기서 각 태그에 /를 닫아주고, crossorigin이라고 되있는 부분을 crossOrigin="true"으로 카멜표기법을 써서 바꿔준다. 

import Head from 'next/head'

const App=({Component})=>{

    return (
        <>
        <Head>
<link/>

<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true"/>
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet"/>
        </Head>
        <Component/>/{/*우리가 components에 만든게 여기 위치한다.  */}
        </>
    )
}
export default App

NEXT.js에 그림 넣기

front폴더에 public폴더를 생성한다. 그리고 그 안에 그림을 저장한다.
그리고 다른 파일에 <img src ="/파일이름.확장자"> 이렇게 바로 써주면 된다.
public이 static설정이 되어있는 것 같다.

[index.jsx]
import BlogLayout from '../components/BlogLayout'

import Head from 'next/head'


const App=()=>{
    return(
        <>  
            
            <BlogLayout>
                <div>
                    <img src ="/11.jpg"/>
                </div>
            Hello NEXT.js
            </BlogLayout>
        </>

    )
}

export default App

폰트도 다음과 같이 여기에 저장해서 넣을 수 있다.

NEXT.js에 CSS넣기

module CSS

[FormLayout.moduel.css]
.footer{
    background:red;
    color:#fff;
}
[FormLayout.jsx]
import Router from 'next/router'
import Head from 'next/head'
import styled from './FormLayout.module.css'

const FormLayout =({children})=>{
    return(
        <><Head>
        <title>YuYu's Blog</title>
    </Head>
            {/* <button onClick={()=>Router.back()}>뒤로가기</button> */}
            <button onClick={Router.back}>뒤로가기</button>
            <div className ="contain">
        {children}
        </div>
        <div className = {styled.footer}>  
            카피라이트 어쩌구 저쩌구...</div>
        </>
    )
}

export default FormLayout

import styled from './FormLayout.module.css'은 안의 모든 css를 객체로 변환시켜준다는 내용이다.
이렇게하면 css파일안의 내용이 객체화되어서 <div className = {styled.footer}>
이렇게 쓸 수 있는것이다.

styled component

$npm i styled-components

vscode-styled-components도 깔아준다.

&:자기 자신을 뜻한다.
& > .nav-toggle이렇게 하면 자기 자신 안에 있는 nav-toggle이란 class이다.
사용법

import Styled from 'styled-components'

const Toggle =Styled.div`
    background:transparent;
    border-color:transparent;
    & > .nav-toggle{
        display:none;
    }
    & >.nav-toggle +label{
        display: block;
        width:2.5rem;
        height:2rem;
        position:relative;
        cursor:pointer;
    }

    & > .nav-toggle +label >span{
        display:block;
        position:absolute;
        width:100%;
        height:5px;
        border-radius:30px;
        background:#000;
        transition:all .35s;
    }

    & > .nav-toggle +label >span:nth-child(1){top:0}
    & > .nav-toggle +label >span:nth-child(2){
        top:50%;
        transform:translateY(-50%)
    }
    & > .nav-toggle +label >span:nth-child(3){bottom:0}
    
    & > .nav-toggle:checked +label >span:nth-child(1){
            top:50%;
            transform:translateY(-50%)rotate(45deg);
        }
    & > .nav-toggle:checked +label >span:nth-child(2){
        opacity:0;
    }
    & > .nav-toggle:checked +label >span:nth-child(3){
        bottom:50%;
        transform:translateY(50%) rotate(-45deg);
    }


`
//& : 자기자신
//단점: 자동완성이 안됨+색상이 안보여서 오타 찾기 힘듦 및 
const NavToggle =()=>{
    return(
        <Toggle>
            <input 
                type = "checkbox"
                id ="nav-toggle"
                className = "nav-toggle"
            />
            <label htmlFor ="nav-toggle">
                <span></span>
                <span></span>
                <span></span>
            </label>
        </Toggle>
    )
}
export default NavToggle

styledComponents의 장점
-파일 수를 줄일 수 있다.

moduleCSS장점
-CSS가 겹치지 않게끔 할 수 있다!!

요즘은 moduleCSS를 잘 쓰지 않고 styledComponents를 많이 쓰는 추세라고 한다^^

오늘의 총 파일구조

profile
YU YU
코딩 재밌어요!
이전 포스트

NEXT.js> NEXT.js 첫걸음

다음 포스트

NEXT.js> styled-components

1개의 댓글

comment-user-thumbnail
져니
2021년 7월 26일

포스팅 속도가 무쟈게 빠르시네요 키키키 잘봤습니다>_<

답글 달기

관련 채용 정보