• 최근에 Next.js 컨퍼런스에서 14 버전을 발표한듯 하다.
• 어떤 기능이 있는지 하나씩 확인해보자.

Turbopack

• 터보팩 자체는 버전 13부터 실험적으로 지원했던 기능으로 알고 있었는데, 14 버전내로 출시를 하려는 모양이다.
• Next.js팀에 따르면 자기네들 사이트에서 테스트했을 때 로컬환경에서 53퍼센트 더 빨리 켜지고, 코드 수정이 반영되는 속도가 94.7퍼센트 빨라졌다고 한다.
• 또한 현재 테스트의 90퍼센트를 통과했다고 한다. 즉 아직 미완성이라는 뜻이다.
• 완성될때까지 조금 시간이 필요해 보이지만, 먼저 체험해보고 싶으면 next dev --turbo 명령어로 터보팩이 적용된 개발환경을 실행해볼 수 있다.
• build과정에서는 아직 지원하지 않는다.

Server Actions

• Server Action도 13.4버전부터 도입된 기능이었는데, 안정화가 되었다고 한다.
• 기존 버전에서 api를 동시에 사용할때는 api 폴더를 사용했다. 유저id와 텍스트 데이터를 받아 이를 서버에 기록하는 api와 컴포넌트가 있다 가정해보자.

// /api/data/route.ts
import { NextRequest, NextResponse } from "next/server";
import uploadData from "uploadData"

export async function POST(request: NextRequest) {
  const {userID, text} = await request.json();
  if (!userID || !text) return NextResponse.json(
    { error: "Invalid Form Data" },
    { status: 400 },
  );
  const {postID} = await uploadData(userID, text);
  return NextResponse.json({
    postID: postID,
    status: 201,
  });
}

// /data/page.tsx
export default function UploadPage() {
  
  const [userID, setUserID] = useState("");
  const [text, setText] = useState("");
  
  const onSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    const formData = {
      userID: userID,
      text: text,
    };
    
    const { ok } = await fetch(`${process.env.NEXT_PUBLIC_API_DOMAIN}/data`, {
      method: "POST",
      body: JSON.stringfy(formData),
    });
    if (!ok) window.alert("upload failed");
    
    setUserID("");
    setText("");
  }
  
  return (
  	<form onSubmit={onSubmit}>
        <div>
          <label className="form-label" htmlFor="email">
            Email address
          </label>
          <input id="email" name="email" type="text" placeholder="email" value={userID} onChange={setUserID}/>
        </div>
        <div>
          <label className="form-label" htmlFor="text">
            Text
          </label>
          <input id="text" name="text" type="text" placeholder="text" value={text} onChange={setText}/>
        </div>
        <button type="submit">
          {"Submit"}
        </button>
      </form>
  )
}

• Server Action을 사용하면 API라우트 생성없이 리액트 컴포넌트 내부에 직접 api를 구현할 수 있다.

// /api/data/route.ts
export default function UploadPage() {
  export async function uploadData() {
    "use server"
    if (!userID || !text) throw new Error(
      { error: "Invalid Form Data" },
    );
    const {postID} = await uploadData(userID, text);
    return ({
      postID: postID,
      status: 201,
    });
  }
  
  setUserID("");
  setText("");

  const [userID, setUserID] = useState("");
  const [text, setText] = useState("");
  
  const onSubmit = async (event: React.FormEvent) => {
    "use server"
    event.preventDefault();
    const formData = {
      userID: userID,
      text: text,
    };
    
    try {
      await uploadData();
    } catch (error) {
      window.alert("upload failed");
    } finally {
      setUserID("");
      setText("");
    }
  }
  
  return (
  	<form onSubmit={onSubmit}>
        <div>
          <label className="form-label" htmlFor="email">
            Email address
          </label>
          <input id="email" name="email" type="text" placeholder="email" value={userID} onChange={setUserID}/>
        </div>
        <div>
          <label className="form-label" htmlFor="text">
            Text
          </label>
          <input id="text" name="text" type="text" placeholder="text" value={text} onChange={setText}/>
        </div>
        <button type="submit">
          {"Submit"}
        </button>
      </form>
  )
}

• App router에서 지원하던 revalidatePath(), redirect(), cookies()와 같은 api들도 Server Action에서 그대로 사용 가능하다.
• 개인 프로젝트같은 소규모 프로젝트에서 빠르게 풀스택 웹페이지를 구현할 때 때 유용하게 사용할 수 있을거 같다.

Partial Prerendering

• 페이지를 서버에서 로딩하기 위해서 흔히 Server Side Generating(SSG), Server Side Rendering(SSR)
• 그런데 SSG는로딩 속도는 빠르지만 정적인 페이지밖에 사용할수 없고, SSR은 api처리로 인해 첫 페이지를 받는데 시간이 오래 걸린다는 단점이 있었다.
• Partital Prerendering은 SSG, SSR의 단점을 극복하기 위한 랜더링 방법으로 Next.js 14에서 공개하였다.
• 어떠한 API도 새로 배울필요가 없으며, 단지 부분적인 로딩이 필요한 부분을 Suspense로 감싸주기만 하면 알아서 적용된다고 한다.
• 페이지 요청시에 fallback을 적용한 정적 HTML파일을 먼저 제공하고, 그 뒤에 데이터 처리가 완료되면 fallback ui 대신 원래 표시해야할 데이터를 스트리밍 방식을 사용했다고 한다.
• 아직 Preview 단계이며 가이드에서도 예시가 나와있지 않는데, 안정화되면 작동 원리에 대해 알아보고 싶다.

Next.js Learn

• 리액트 문서에 있는 것과 비슷한 새로운 학습 가이드를 추가한듯 하다.
• 이곳에서 가이드를 볼 수 있다.

출처:
https://nextjs.org/blog/next-14