Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- react env
- github io
- ngrok설치
- react
- createGlobalStyle
- git lab
- styled components
- bootstrap
- Git
- react typescript
- API 토큰
- nextjs .env
- CSS
- npm styled-reset
- nextjs 설치
- fetch
- getModifierState
- 컨디셔널 렌더링
- SCSS
- next.js css
- dart 변수
- github
- icon
- input type=file
- nextjs
- rewrites
- typescript react
- ngrok실행
- API token
- There isn’t anything to compare
Archives
- Today
- Total
꾸준히 성장하는 개발자
[Next.js] Next.js 시작하기 본문
시작하기 전 Next.js는 무엇인가??
Next.js는 React 기반의 프레임워크로, React 애플리케이션을 구축하기 위한 기능과 기본 구조를 제공합니다.
다음은 Next.js의 주요 특징입니다:
- 서버 사이드 렌더링 (Server-Side Rendering, SSR): Next.js는 페이지를 서버 측에서 렌더링하여 초기 로드 속도와 검색 엔진 최적화(SEO)를 개선할 수 있습니다. SSR은 사용자에게 초기 콘텐츠를 빠르게 표시하여 사용자 경험을 향상시킵니다.
- 정적 사이트 생성 (Static Site Generation, SSG): Next.js는 빌드 시점에 사전 렌더링하여 정적 파일로 생성할 수 있습니다. 이를 통해 동적 데이터를 사전 렌더링하여 정적인 HTML 파일을 생성하고 CDN에 배포할 수 있으며, 이는 성능과 보안에 이점을 제공합니다.
- 자동 코드 분할 (Automatic Code Splitting): Next.js는 페이지별로 자동으로 코드를 분할하여 필요한 코드만 로드되도록 합니다. 이를 통해 초기 로딩 속도를 향상시키고 필요하지 않은 코드의 로드를 줄일 수 있습니다.
- Hot Module Replacement (HMR): Next.js는 개발 중에 코드 변경 사항을 실시간으로 반영하여 빠른 개발 환경을 제공합니다. 변경된 모듈만 업데이트되어 페이지 새로고침 없이 개발 과정을 간편하게 유지할 수 있습니다.
- 간편한 라우팅: Next.js는 내장된 라우팅 시스템을 제공하여 페이지 간의 이동과 동적 경로 매개변수 처리를 쉽게 할 수 있습니다.
- API 라우팅: Next.js는 API 엔드포인트를 쉽게 작성하고 라우팅할 수 있는 기능을 제공합니다. 이를 통해 서버리스 함수나 백엔드 API를 구축할 수 있습니다.
- 다양한 환경 지원: Next.js는 TypeScript, CSS-in-JS 라이브러리 (예: styled-components, Emotion)와 함께 사용할 수 있으며, 다양한 데이터 백엔드와의 통합을 지원합니다.
시작하기
npx create-next-app@latest
만약 typescript도 함께 진행하고 싶다면 뒤에 --typescript를 함께 작성해주면 된다.
npx create-next-app@latest --typescript
설치를 기다리면 프로젝트 이름은 무엇으로 할지 물어볼 것이다
그때 이름을 작성해주면 된다
pages라는 폴더가 있는데 이 페이지 안에 제작을 해서 렌더링 해준다
export default function Home() {
return "hi";
}
안에 작성할 때는 위처럼 작성하는데
이때 주의할점이 fuction의 이름으로 페이지를 렌더링 하지 않고 파일의 이름으로 렌더링이 된다는 점이다
페이지 이동이 될때 저 pages의 폴더 안에 있는 파일들의 이름을 보면된다
index는 ' / '
About는 '/About ' 이렇게 작성해주면 된다.
파일의 이름을 적는다는것 잊지말자!!!
'Next.js' 카테고리의 다른 글
[Next.js] Pre-rendering / getServerSideProps (0) | 2022.08.17 |
---|---|
[Next.js] api키 숨기기 / redirect / rewrite (0) | 2022.08.16 |
[Next.js] _app.js / 커스텀 App component (0) | 2022.08.04 |
[Next.js] Louting (1) | 2022.05.31 |