Next.js 12 + 부트스트랩 상용구

이 블로그에 aNext.js + Bootstrap starter project에 대해 처음 쓴 지 거의 2년이 되었습니다. 그 이후로 저는 기본 템플릿을 확장하여 구성하고 사용하기 쉽게 만들었습니다. 이제 Goldstack : Next.js + Bootstrap Template 의 템플릿 중 하나로 사용할 수 있습니다.

스타터 프로젝트 빌더를 사용하는 것이 새 프로젝트를 시작하는 좋은 방법이라고 생각하지만 때로는 작업 중인 프로젝트의 소스 코드를 보는 것이 유용할 수 있다고 생각합니다. 전체 프로젝트를 복제하여 필요에 맞게 조정하거나 필요한 부분만 복사하여 붙여넣을 수 있습니다(일반적으로 상용구라고 함, 예 및 참조).

따라서 GitHub에 Next.js 12 + Bootstrap boilerplate 프로젝트를 생성했습니다. 이 프로젝트는 기본 Goldstack 템플릿에서 자동으로 생성되므로 템플릿이 업데이트되면 상용구도 자동으로 업데이트됩니다.



여기 GitHub의 프로젝트를 참조하십시오: github.com/goldstack/nextjs-bootstrap-boilerplate .

지역 개발

상용구를 설정하고 로컬 개발을 위해 실행하려면 몇 가지 명령만 필요합니다.

먼저 리포지토리를 복제합니다.

git clone [email protected]:goldstack/nextjs-bootstrap-boilerplate.git

그런 다음 종속 항목을 설치하고 프로젝트를 빌드합니다.

yarn
yarn build

그런 다음 Next.js 프로젝트를 제공할 로컬 개발 서버를 시작할 수 있습니다.

cd packages/app-nextjs-bootstrap-1
yarn watch

부트스트랩 구성

부트스트랩 파일은 폴더 packages/app-nextjs-bootstrap-1/src/styles 에 포함되어 있습니다. 파일app.css에는 부트스트랩 소스에서 컴파일된 모든 부트스트랩 구성 요소에 대한 CSS가 포함되어 있습니다.

패키지packages/app-nextjs-bootstrap-1에는 compile:sass 을 사용하여 부트스트랩 소스가 변경된 경우 업데이트app.css할 스크립트 node-sass 가 포함되어 있습니다.

Bootstrap 스타일은 the application component 에서 _app.tsx 을 수정하여 Next.js 애플리케이션에 사용할 수 있습니다. 여기서는 컴파일된app.css 파일을 가져옵니다.

/* eslint-disable react/prop-types */
import React from 'react';

import './../styles/app.css';

const BootstrapApp = ({ Component, pageProps }): JSX.Element => {
  process.env.GOLDSTACK_DEPLOYMENT =
    process.env.NEXT_PUBLIC_GOLDSTACK_DEPLOYMENT;
  return <Component {...pageProps} />;
};

export default BootstrapApp;

상용구에는 부트스트랩 스타일을 사용하여 구성 요소를 쉽게 만들 수 있는 라이브러리가 포함되어 있습니다. 부트스트랩 구성 요소는 다음과 같이 가져올 수 있습니다.

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button';
import Image from 'react-bootstrap/Image';

인프라 및 배포

상용구에는 AWS에서 프로젝트의 인프라를 설정하기 위한 정의Terraform와 배포용 스크립트가 함께 제공됩니다. 이 인프라는 완전하므로 매우 저렴한 비용으로 호스팅할 수 있으며 다양한 사용 수준으로 쉽게 확장됩니다. 트래픽이 중간 정도인 사이트의 경우 인프라 비용은 한 달에 미화 1.00달러 미만이어야 합니다.

Terraform은 필요에 따라 쉽게 조정할 수 있습니다. packages/app-nextjs-bootstrap-1/infra/aws 에 있는 파일을 수정하기만 하면 됩니다.

프로젝트의 인프라를 설정하려면 프로젝트 구성goldstack.json을 조정해야 합니다.

{
  "$schema": "./schemas/package.schema.json",
  "name": "app-nextjs-bootstrap-1",
  "template": "app-nextjs-bootstrap",
  "templateVersion": "0.1.0",
  "configuration": {},
  "deployments": [
    {
      "name": "prod",
      "awsUser": "goldstack-dev",
      "awsRegion": "us-west-2",
      "configuration": {
        "hostedZoneDomain": "dev.goldstack.party",
        "websiteDomain": "nextjsbootstrap-1646549479572.tests.dev.goldstack.party",
        "defaultCacheDuration": 10
      },
      "tfStateKey": "app-nextjs-bootstrap-1-prod-ef2ea3a3ceb56c2d4c87.tfstate"
    }
  ]
}

여기서 핵심은 deployments[0].configuration.hostedZoneDomain 및 deployments[0].configuration.websiteDomain 속성입니다. 애플리케이션의 호스팅 영역을 결정하는 방법을 모르는 경우 Hosted Zone Configuration on the Goldstack documentation 을 확인하십시오. websiteDomain는 단순히 애플리케이션을 배포하려는 도메인입니다.

마지막으로 올바른 AWS 계정을 가리키도록 로컬 환경을 구성해야 합니다. 이를 수행하는 방법에 대한 자세한 지침은 AWS Configuration의 Goldstack 설명서를 참조하십시오.

모든 것이 구성되면 다음을 실행하는 것만큼 쉽게 인프라를 구축할 수 있습니다.

cd packages/app-nextjs-bootstrap-1
yarn infra up prod

마지막으로 다음을 사용하여 애플리케이션을 배포할 수 있습니다.

yarn deploy prod

부트스트랩은 한동안 사용되었지만 확실히 , 및 와 같은 많은 프레임워크와 함께 사용됩니다.

use Bootstrap with Next.js하는 것은 그리 어렵지 않으며 이들을 결합하면 .

이 상용구는 매우 빠르게 설정하고 시작할 수 있도록 도와줍니다. Next.js용 부트스트랩 구성 외에도 최신 JavaScript 프로젝트에서 기대하는 모든 삶의 질 기능이 포함되어 있습니다. VSCode와 함께 작동하도록 최적화되어 있으며 TypeScript를 사용하고 Jest와 함께 단위 테스트를 수행합니다. 기능의 전체 목록을 보려면 이 상용구가 모든 기능을 상속하는 Goldstack의 Next.js + Bootstrap template을 확인하십시오.

이 템플릿에 대한 의견이나 아이디어가 있으면 Goldstack GitHub project 및 raise an issue으로 이동하십시오.


Unsplash의 표지 사진, Flat의 아이콘Icon