Gyuseong Lee's blog

Next.js + Tailwind CSS로 홈페이지 만들기 삽질기

참고한 강의:

많은 github.io 프로필과 블로그 템플릿들이 있었지만, resume와 blog 기능을 모두 포함한 마음에 드는 템플릿이 있지 않고, 직접 고쳐서 써보려 해도 대부분의 github.io 블로그 템플릿은 Jekyll 기반의 블로그라서 Ruby는 전혀 익숙하지 않아 고치기가 쉽지 않았음.

1. Next.js 설치 & 프로젝트 생성

$ npm init -y
$ npm i next react react-dom
$ npx create-next-app@latest {프로젝트 이름}

프로젝트 생성 중에 TypeScript, App Router, Tailwind CSS 설치 여부를 물어볼텐데 JavaScript를 사용했고, 나머지는 App Router, /src 폴더 사용 여부와 Tailwind CSS를 사용할 것이므로 모두 Yes로 설치함.

2. package.json 수정 (보통은 이미 잘 되어 있음)

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

추가로, Github Pages를 통한 배포를 위해 설정해두면 좋은 부분들이 있음. 이때 gh-pages 패키지를 설치해야 함.

$ npm i gh-pages

"scripts": {
    "predeploy": "npm run build",
    "deploy": "touch out/.nojekyll && gh-pages -d out --dotfiles",
  },

3. 개발 서버 실행

$ npm run dev

이 명령을 실행하면 development server가 실행되고, http://localhost:3000/ 에서 확인할 수 있음.

4. App router 사용하기

프로젝트 생성 시 src 폴더를 사용하기를 체크했으면 src 폴더 안에 app 폴더가 존재하고, 아니라면 루트에 app 폴더가 있을 것. 가장 메인이 되는 파일은 src/app/page.js와 src/app/layout.js 파일, 홈페이지가 처음 실행되면 이 두 js 파일을 통해 root 경로에서 화면이 구성됨.

여기에는 layout.js 안에 children argument가 있는데 이 값이 page.js가 리턴하는 HTML 코드를 나타냄.
따라서 layout.js의 코드에 page.js의 리턴값이 합쳐저 루트 화면을 구성.

src/app/blog 라는 폴더를 만들고, 이 안에 page.js를 만들고 src/app/page.js와 같은 코드를 넣어주면 http://localhost:3000/blog 경로에서 확인할 수 있음.

5. Dynamic routing 사용

src/app/blog 라는 폴더 안의 page.js 파일이 존재하면 http://localhost:3000/blog 페이지가 존재함.

이 폴더 안에서 src/app/blog/[id] 폴더를 만든 후 이 폴더 안에 page.js와 (optional) layout.js를 만들면, http://localhost:3000/blog/[id] 로 접속했을 때 page.js 파일의 내용이 표시됨.

여기서 [id]는 어떤 숫자나 문자가 가능하며, 이 id 값을 받기 위해서는 /src/app/blog/[id]/page.js 파일에서 default로 정의된 함수의 argument인 props를 받고, props.params.[id]를 통해 액세스할 수 있음.

6. 배포

6-1. github.io를 통한 배포 시 dynamic routing

github.io에서는 따로 서버를 사용할 수 없기 때문에, 그냥 배포하는 경우 github.io로 서비스할 수 없다고 한다. 그래서 next.js에서 지원하는 Static Exports를 통해 static page로 만들어 배포해야 한다.

next.config.js에서 output: "export"를 넣고 page를 build한다.

const nextConfig = {
    basePath: "",
    output: 'export'
};

추가로 dynamic routing 페이지가 존재하는 경우 이 라우팅을 static page로 만들어야 하므로, generateStaticParams 함수를 [id]/page.js 파일에 정의해서 build time에 이 페이지들을 static page로 만들어준다.
참고한 블로그: next.js 13에서 SSG구현 generateStaticParams

export async function generateStaticParams() {
  const postLists = await getPostLists()
  const posts = postLists.posts
  return posts.map((post) => ({
      slug: post.slug,
    }))
}

만약 dynamic routing되는 페이지의 경로가 /blog/[slug]라면, 위 함수는 slug를 리턴해야 한다. 이 함수에서는 getPostList() 함수를 통해 __post 폴더의 모든 *.mdx 파일의 리스트와, 그 내용에 담긴 slug를 읽어온다.

더 잘 짜는 방법이 있을 것 같지만 일단은 이런 식으로 작성하니 페이지들이 잘 빌드되는 것을 확인하였다.

6-2. github.io로 페이지 빌드 및 배포

github에 [username].github.io 이름의 빈 repository를 만들고, 현재 작업 중인 폴더에 git remote를 통해 연결한다.

$ git init
$ git add .
$ git commit -m "initial commit"
$ git remote add origin {repository url}

gh-pages 패키지를 설치하여 자동으로 배포를 수행할 수 있다.

$ npm install gh-pages --save-dev

package.json 파일에 homepage가 없다면 추가, 있다면 수정하여 https://[username].github.io/ 를 넣는다.

그 다음 아래와 같이 deploy 시에 수행할 script를 추가한다:

"scripts": {
    "predeploy": "npm run build",
    "deploy": "touch out/.nojekyll && gh-pages -d out --dotfiles",
  },

그냥 github page에 올리면 자동으로 jekyll을 이용해 빌드하려고 하는데 이를 막기 위해 루트에 .nojekyll 파일을 만들어준다.

이제 다음 명령어를 순서대로 입력하면, static page를 build하고 자동으로 연결된 github pages repository에 업로드, 배포된다:

$ npm run predeploy
$ npm run deploy

(Optional) 코드 하이라이팅 기능 적용

많은 글들에서 사용하는 react-syntax-highlighter를 사용하여 적용하였다. 근데 그 과정에서 Tailwind CSS와의 호환성에 문제가 있었다.

react-markdown을 사용하면 markdown을 HTML로 파싱해서 각종 태그를 달아 주는데 여기서 Tailwind CSS를 사용하면 모든 태그의 기능을 없애버려서, 이를 막기 위해 @tailwindcss/typography를 설치한 후 react-markdown 블록에만 prose 클래스를 달아 원래 HTML 태그 디자인이 보이도록 설정하였다.

그런데 코드들은 자동적으로 코드 블럭이 <pre> 태그로 감싸서 들어가는데, prose 클래스를 달면 <pre> 태그에 속성이 border와 background가 걸려 있었다. 코드 하이라이팅을 설정하면 코드 블럭에 자체적으로 디자인이 들어가기 때문에 그냥 설정하면 두 가지 디자인이 모두 들어가 버려서, 코드 블럭에 테두리가 두껍게 생긴 안 예쁜 디자인이 생겨버렸다. 이거 해결하는데만 3일은 쓴 듯 하다.

코드는 여기서 참고하였고, 결국은 아래와 같이 React-Markdown 블럭의 components prop에 pre 태그의 handler를 넣어주면 된다.

pre({children}) {
  return children
},

(Optional) 백틱(`) 기호로 인라인 코드를 넣었을때 커스텀 스타일 적용하기

백틱(`) 기호로 인라인 코드 블럭을 넣었는데, bold 처리만 되고 백틱이 그대로 보이는 등 문제가 있었다. 노션에서는 이 부분을 자동으로 백그라운드 + 빨간색 글자의 블럭으로 바꿔주어 이런 느낌으로 적용하고 싶었다.

이 또한 검색하다 여기서 해답을 찾았다. /tailwind.config.js 파일에 아래와 같이 추가해주면 된다.

module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            'code::before': {
              content: '&nbsp;&nbsp;',
            },
            'code::after': {
              content: '&nbsp;&nbsp;',
            },
            code: {
              background: '#ffeff0',
              wordWrap: 'break-word',
              boxDecorationBreak: 'clone',
              padding: '.1rem .3rem .2rem',
              borderRadius: '.2rem',
            }
          },
        },
      },
    },
  },
  plugins: [require('@tailwindcss/typography')],
};

여기서 \&nbsp 때문에 빌드에 계속 실패했는데, 여기서 \&nbsp 대신 그냥 공백을 넣어 주면 거의 비슷한 역할을 하여 해결할 수 있다.

Next.js 홈페이지 만들기 삽질기