Bun에서 서버사이드 렌더링 NextJS 간단 사용하기

 

 

 

NextJS 준비

 

미리보기에서 동적으로 이미지와 제목을 변경하기 위해 서버사이드 렌더링을 사용하기로 했다.

런타임을 nodejs로 할까 하다가 최근에 계속 bun으로 작업해서 모든 사이드 프로젝트 런타임을 bun으로 통일했다.

 

https://bun.sh/guides/ecosystem/nextjs

살짝 걱정되는건 아직 완벽하게 bun에서 NextJS를 제어하지 못한다는 점이다.

아무래도 NextJS가 NodeJS에 맞춰 개발을 하다보니 그런 것 같다.

 

잘되는지 확인하기 위해 bun run start를 했더니 Error: ENOENT: no such file or directory, open '/WEB/.next/BUILD_ID' 이런 오류를 만나게 됐다.

 

 

공식문서를 보니 bun run dev를 하라고 해서 했다.

오~ 잘 나왔다.

(혹시 이래도 안되면 bun run build 해보시길)

(아래 문서 참고)

https://github.com/vercel/next.js/discussions/57066

Error: ENOENT: no such file or directory, open 'E:\projects\almostwiki\my-app\test\my-app\.next\BUILD_ID' · vercel/next.js · D

 

 

 

 

NextJS 간단하게 사용해보기

https://velog.io/@director20844/Next.js-Pages%EC%99%80-%EB%9D%BC%EC%9A%B0%ED%8C%85

Next.js - Pages와 라우팅

이 분의 글을 보고 따라하려고 했는데 뭔가 이상했다.

그건 바로 나한텐 pages라는 폴더가 없다는 것이다!

 

보이는 것과 같이 app만 있을 뿐이다...

(src도 없음^^)

 

https://www.inflearn.com/questions/882151/nextjs-%ED%8F%B4%EB%8D%94%EA%B5%AC%EC%A1%B0-%EB%8B%A4%EB%A5%B4%EC%8B%A0%EB%B6%84-pages-styles-%EC%97%86%EB%8A%94%EB%B6%84

nextjs 폴더구조 다르신분(pages/, styles/ 없는분) - 인프런

왜 그런가 하고 찾아보니 처음 만들때 몇가지를 물어봤는데 그때 Yes, No 한거에 따라 구조가 바뀌는 것 같았다.

그러니 pages 폴더가 없어도 괜찮다!

 

그렇다면 인제 어떻게 Next를 시작하면 될까?

const Router = () => (
  <BrowserRouter>
    <Routes>
      <Route exact path='/main' element={<Main />} />
      <Route exact path='/' element={<Intro />} />
      <Route exact path='/login' element={<Login />} />
      ...
  </BrowserRouter>
);

React의 경우 위와 같이 라우팅 해줬다.

근데 Next는 이럴 필요가 없다 ❗️

 

 

 

Next의 폴더별로 라우팅이 생긴다 👍

위와 같이 app 폴더 아래에 likwe라는 폴더를 만들면 localhost:3000/likwe로 라우팅된다.

여기에서 Next의 약속을 지켜야하는게 있는게 그건 바로 전체 페이지가 될 파일의 이름은 page.tsx 혹은 page.js로 해야한다.

 

const Example = () =>{
    return(<>이곳은 likwe 페이지📑</>)
}

export default Example;

/app/likwe/page.tsx에 있는 곳에 위와 같은 코드를 치고 저장해주면

 

잘 나오는 것을 확인할 수 있다 👍

 

여기에서 혹시 localhost:3000/likwe/love로 해주고 싶다면 어떻게 해야할까?

그럼 likwe 폴더 아래에 love라는 폴더를 만들고 거기에 page.tsx를 생성해주면 된다.

즉, Next에서는 폴더 구조로 라우팅 된다는 것을 알 수 있다.

 

아주 기초적으로 Bun에서 Next 사용하는 방법에 대해 알아봤다.

Next는 처음 사용하기 때문에 Bun 말고 다른 런타임과는 어떻게 다른지 모르겠지만 Bun에서도 잘 되는걸 확인했다.

결정적인 결함이 나타나지 않는 한 계속해서 Bun에서 Next를 돌릴 것 같다.

 

 

 

 

 

 

 

fin.