Next.js란?

Next.js는 React 기반의 서버 사이드 렌더링(SSR) 프레임워크로,
SEO 최적화와 빠른 로딩 속도를 제공하며,
코드 스플리팅, Hot Module Replacemen(HMR)등의 기능을 내장하여 개발자의 생산성을 높입니다.
또한 정적 사이트 생성 기능을 제공하여 빌드 시점에 페이지를 미리 렌더링 하여 성능 향상을 도모한다.

• react 라이브러리 상에 구축된 프레임워크이다.
• next/router를 비롯한 다양한 핵심 기능을 추가해준다.
• 화면 깜빡임이 사라져 UX 향상에 도움을 준다.
• BE code를 추가하는 작업이 원활하다.

📘 Next.js 시작하기

💬 next.js 앱 만들기

• npx create-next-app으로 next.js 앱 생성
• npm run dev로 next.js 앱 실행

💬 페이지 간 이동

• 폴더와 파일 이름을 기반으로 경로가 연결된다.

• 예를 들어 pages/posts/first-post.js의 경우 http://localhost:3000/posts/first-post 와 연결된다.

• import Link from 'next/link'
  
  <Link href="/">Back to home</Link>
  

• Link를 사용하여 페이지간 이동이 가능한데, 이는 동일한 Next.js 앱에서 두 페이지간 클라이언트 측 nevigate을 가능하게 한다.

💬 Assets, Metadata, and CSS

• 이미지 최적화로 더 작은 viewport에 큰 이미지가 전달 되는 것을 방지한다.

• 이미지 형식을 자동으로 채택하므로 빌드 시간이 늘어나는 것을 방지한다.

• // example
  import Image from 'next/image';
  
  const YourComponent = () => (
  	<Image
    	src="/images/profile.jpg"
        alt="Your Name"
    />
  );

• Assets 및 Next.js & tailwind 예제

  • Styling Tips - Assets, Metadata, and CSS | Learn Next.js
  • next.js/examples/with-tailwindcss at canary · vercel/next.js · GitHub

💬 사전 렌더링 및 데이터 가져오기

• Next.js는 JavaScript에서 모든 작업을 수행하는 대신 미리 각 페이지에 대한 HTML을 생성하여 모든 페이지를 pre-rendering 한다.
• 이는 더 나은 성능을 보여주고 SEO 향상에 도움을 준다.
• 생성된 각 HTML 문서는 해당 페이지에 필요한 최소한의 JavaScript 코드와 연결되고 페이지가 브라우저에 의해 로드되면 해당 JavaScript 코드가 실행되서 페이지가 완전히 상호작용된다. ( it called hydration )
• 따라서 일반 React.js 앱은 사전 렌더링이 없으므로 JavaScript는 비활성화하면 앱을 볼 수 없다.
• 사전 렌더링의 형식은 static generation과 server-side rendering의 두가지 형식이 있다.
• Next.js 를 사용하면 각 페이지에 사용할 사전 렌더링 방식을 선택 할 수 있다.
• 대부분의 페이지에서는 static generation을 사용하고 일부 페이지에서는 server-side rendering을 사용하여 하이브리드 Next.js 앱을 만들 수 있다.
• static generation은 빌드 시 HTML 을 생성하는 사전 렌더링 방법으로 미리 렌더링된 HTML이 각 요청에서 재사용 된다.
• server-side rendering은 각 요청마다 HTML을 생성한다.
• 사용자 요청보다 먼저 페이지를 rendering 할수 없는 경우 server-side rendering을 하는게 좋다. (= 요청이 있을 때마다 데이터를 최신 상태로 유지해야 하는 경우)

💬 Dynamic routes

• pages/posts/[id].js의 형태로 동적 경로를 설정한다.

• getStaticProps를 사용하면 반드시 getStaticPaths를 통해 빌드 타임 때 정적으로 렌더링할 경로를 지정해야 한다.

• 정의하지 않은 하위 경로는 접근해도 화면이 뜨지 않는다.

  • fallback: false 로 이외의 경로에 404를 return 해줄 수 있음.)

• getStaticPaths 구현

  • // 파일 경로
        export function getAllPostIds() {
          const fileNames = fs.readdirSync(postsDirectory);
    
          // returned list는 문자열이 아닌 객체 배열이여야 한다.
          // 각 object는 params key 가 있어야 하며
          // 파일 이름에 id를 사용하므로 id 키를 가진다.
          // [
          //   {
          //     params: {
          //       id: 'ssg-ssr'
          //     }
          //   },
          //   {
          //     params: {
          //       id: 'pre-rendering'
          //     }
          //   }
          // ]
    
          return fileNames.map((fileName) => {
            return {
              params: {
                id: fileName.replace(/\.md$/, ''),
              },
            };
          });
        }

  • 수정 해야 함

• getStaticProps 구현

• 주어진 id로 게시물을 렌더링하기 위해 필요한 data를 가져온다.

  • // lib/posts.js
    
     export function getPostData(id) {
     	const fullPath = path.join(postsDirectory, `${id}.md`);
        const fileContents = fs.readFileSync(fullPath, 'utf8');
    
        // Use gray-matter to parse the post metadata section
        const matterResult = matter(fileContents);
    
        // Combine the data with the id
        return {
          id,
          ...matterResult.da
        };
      }

  • // pages/posts/[id].js
    
     import { getAllPostIds, getPostData } from '../../lib/posts';
    
     export default function Post({ postData }) {
     	return (
        	<Layout>
            {postData.title}
            <br />
            {postData.id}
            <br />
            {postData.date}
            </Layout>
          );
      }
    
     export async function getStaticProps({ params }) {
     	const postData = getPostData(params.id);
        	return {
            	props: {
                postData,
              },
            };
          }

💬 API Routes

• API Routes는 getStaticProps나 getStaticPaths에서 가져오면 안된다.
• getStaticProps나 getStaticPaths는 서버에서만 실행될 뿐만 아니라 브라우저용 Javascript 번들에 포함되지 않는다.

• export default function handler(req, res) {
  	const email = req.body.email;
      // Then save email to your database, etc...
  }