728x90 🧱 언어 모음집/Next.js35 [Next.js] Image [Next.js] Link 웹사이트에서 서로 다른 페이지를 연결할 때는 태그를 사용합니다. Next.js에서는 Link와 a 태그를 함께 사용합니다. 1) index.js에 JSX 구문에 아래 코드를 삽입합니다. import Link from "next/link"; export de.. eundol1113.tistory.com 위 포스팅에서 진행한 코드를 기반으로 진행 됩니다. 앞에서 추가한 두페이지에는 스타일이 없습니다. 페이지의 스타일을 지정하기 위하여 CSS를 추가 해보겠습니다. Next.js에는 CSS 및 Sass에 대한 지원이 내장되어 있습니다. 이 과정에서는 CSS를 사용합니다. 추가적으로 title 태그와 같은 페이지 메타 데이터 및 이미지와 같은 정적 자산을 처리하는 방법에 대해서도 설명합.. 2022. 2. 17. [Next.js] Link 웹사이트에서 서로 다른 페이지를 연결할 때는 태그를 사용합니다. Next.js에서는 Link와 a 태그를 함께 사용합니다. 1) index.js에 JSX 구문에 아래 코드를 삽입합니다. import Link from "next/link"; export default function Home() { return ( Learn Next.js! ); } 2) a 태그를 사용하고자 하는 페이지 상단에 아래와 같이 next/link의 Link 요소를 import 해옵니다. (index.js) import Link from 'next/link' 3) 1번에서 작성한 코드 중 a 태그를 Link 요소로 감싸고, href를 a 태그에서 Link 요소를 속성으로 옮깁니다. import Link from "next/lin.. 2022. 2. 17. [Next.js] (4) 외부 이미지 파일 사용하기 외부 이미지 파일 사용하기 1) getStaticProps(SSG)를 사용하여 photos api 서버에 요청을 보내고, 데이터를 받아온다. export const getStaticProps = async () => { const res = await fetch( `https://jsonplaceholder.typicode.com/photos?_start=0&_end=10` ); const photos = await res.json(); // res를 json으로 변환하여 photos에 담는다. return { props: { photos: photos, }, }; }; 2) next에서 기본으로 제공해주는 image 컴포넌트를 import 받는다. import Image from "next/image".. 2022. 2. 16. [Next.js] (3) SSR, SSG SSR(Server Side Rendering)과 SSG(Static Site Generation) 두 가지 방법을 사용하여 fetch를 진행 할 수 있기 때문에 Next.js에서 매우 중요한 부분이라고 할 수 있습니다. SSR(Server Side Rendering) import Header from "../components/Header"; export default function Home({ posts }) { console.table(posts); return ( Welcome to My Blog {posts.map((post) => { return {post.title}; })} ); } export const getServerSideProps = async () => { const res =.. 2022. 2. 16. [Next.js] (2) 컴포넌트 생성하여 import 받기 공통적으로 사용하는 코드를 하나의 컴포넌트로 묶기 위 코드에서 index.js에 Nav와 Header 부분은 index.js도 사용하고 있고, photo.js에서도 사용하고 있다. 이 경우 두가지 방법이 있을 것이다. 1) Nav와 Header 부분을 index.js도 작성하고, photos.js에도 작성한다. → 이 경우 작은 프로젝트에서는 큰 문제는 없겠지만 프로젝트가 커질 수록 불필요한 코드로 인해 코드 가독성과 용량이 커진다는 문제점이 있다. 2) 공통적인 부분을 하나의 컴포넌트로 묶어서 재사용 하기 → 이 경우 1번에서의 문제점을 해결 할 수 있다. (예시) 1) Components 폴더를 생성한다. 2) 우선 Components 폴더에 Layout.js와 Nav.js를 생성한다. Layout... 2022. 2. 16. [Next.js] (1) 기본 설정, 기능들 설치하기 공식문서를 보면 Setup(자동 설정)과 Manual Setup(수동 설정)이 있는 데 이번에는 Setup으로 프로젝트를 생성 했다. $ npx create-next-app@latest next-practice Getting Started | Next.js Get started with Next.js in the official documentation, and learn more about all our features! nextjs.org 설치 후 파일 구조 둘러보기 설치 후에 package.json을 확인 해보면 dependencies에 깔끔하게 설치 되어 있는 걸 볼 수 있고 WebPack 같이 중요한, 필수적인 라이브러리들은 next에서 알아서 관리 해주기 때문에 별도의 설정이 필요하지.. 2022. 2. 16. [Next.js] 개념 정리 (2) next.js 기본 개념 알아보기 next.js 기본 개념 알아보기, react, seo, ssr kyounghwan01.github.io Next.js는 프론트엔드 기술로 Zeit에서 만든 React 프레임워크입니다. React 프레임워크인 만큼 사용하는 언어는 typeScript와 javaScript입니다. React는 UI를 만들기 위한 라이브러리입니다. 라이브러리이기 때문에 핵심적인 기능만 제공하고, 그 외의 기능은 별도의 3rd party 라이브러리로 제공합니다. (제대로 된 프로젝트를 만들기 위해서는 React만으로는 부족하기 때문에 다른 라이브러리를 조합 해야 합니다.) Next.js는 React로 프론트엔드 개발 시 필요한 여러가지 유용한 기능을 기본으로 제공 해줍니다. 1. SSR이라고 .. 2022. 2. 16. [Next.js] 개념 정리 (1) SSR SSR의 경우 브라우저가 서버에서 데이터를 받아온 후 화면을 띄운다. 따라서 초기 로딩 속도가 빠르며, 검색 엔진 최적화에 유리하다. 그러나 화면 전환 시, CSR 보다 사용자가 화면을 보기까지의 시간이 오래 걸린다. CSR CSR의 경우 데이터를 받아올 때까지 기다리지 않고, 프론트에서 서버에 요청을 보낸 후 데이터가 없는 화면을 먼저 띄운다. 그 후 백엔드에서 요청한 데이터를 받아온 후, 데이터가 적용된 화면을 띄운다. 따라서 페이지 전환이 빠르다. 그러나 데이터를 가져오는 동안 첫 페이지를 로딩 페이지로 띄워 놓는다면, 검색 엔진이 데이터에 접근하지 못하기 때문에 그냥 나가버리는 경우가 생길 수도 있다. (어떤 검색 엔진이냐에 따라 다르다.) 따라서 보통 첫 페이지는 SSR을 .. 2022. 2. 6. 이전 1 2 3 4 다음 728x90
