nextJS와 Strapi 연결하기 | 나만의 블로그 만들기 (3)

🤗 back to front = rest api

지난 글에서 백엔드 로직을 짜보았다. 50%는 완성되었나 싶었는데, 아직 갈 길이 멀다. 프론트로 넣어서 어떻게 보여줄 것인가의 작업이 남아있다. 사실 보여주는게 제일 중요하다.

일단 data를 넘겨 받아와야하는데 strapi는 restAPI 와 graghPL을 제공한다. 나는 익숙한 restAPI를 활용해보고자 한다.

백엔드의 데이터를 활용하는데 2가지 방법이 생겼다.

1. supabase의 API를 활용하는 방법 supabase는 자체적으로 api를 제공한다. 그래서 next.js에 supabase를 연동시키고 api를 불러와서 쓰는 방식이 있다.

SELECT ID
let { data: posts, error } = await supabase
  .from('posts')
  .select('id')

2. strapi의 API를 활용하는 방법 도메인 / api / collection 명을 넣으면 api로 쏴준다. strapi가 제공하는 cms 기능을 효율적으로 이용할 수 있을 것 같다는 판단이 들었다.

In Strapi, an endpoint can be accessed through the plural of the collection type name, prefixed by /api/. Thus, if we wish to make a GET request to the Post collection type, which ID/slug of post on the development server, the request URL would be: localhost:1337/api/posts.

strapi to nextjs

npx create-next-app@latest

What is your project named? front
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias? No / Yes

nextjs를 설치한다.

우선 strapi에 컬렉션을 만들고 콘텐츠 매니저의 입장으로 글을 하나 써본다.

일단 api를 테스트하는 plug-in에 api를 넣어서 테스트해본다.

strapi 보안 열기(fobiddenError)

오 안불러와진다. 403 error를 때린다. restapi와 strapi를 연결하는 글을 찾아 시도해보자 링크

When making this request, we find that the response is forbidden. That is because, 😈**by default, Strapi has a permission system that prevents access to any operation on the application's data.**😈 You would have to explicitly permit whatever operation you wish to be publicly available in the application.

기본적으로 데이타를 불러올때 사용하는 권한이 막혀있다. 그래서 그걸 내 손으로 직접 뚫어줘야한다.

To fix this, we would work with the "Users and Permissions" plugin in Strapi, which is pretty intuitive when it comes to controlling the operations that external applications and users can make within an application's data.

To fix this, strapi Settings

1. settings
2. user & permissions tap
3. Roles
4. Public
5. Permission 변경

row-level-security 권한을 열어줘야 접근이 가능하다. 평생 데이터 못 받을 뻔했다.

오 에러코드는 없어졌다. 근데 데이터가 안온다.

✍🏾 cms publish

cms admin 창에서 글이 있는데 불러와지지 않았다. 이건 strapi의 cms 기능인데 임시저장 같은 기능이다.

State가 draft상태일 땐 api call 을 해도 보내주지 않는다.

이것 때문에 supabase api를 사용하지 않고 strapi api를 사용한 이유다. (아직은 이 것밖에 유용한 점 발견 못함🤟🏻)

nextjs - feach

nextjs에서 불러 올 차례 page.tsx에 데이터를 불러와본다. 참고

// src/app/page.tsx
async function getData() {
    const res = await fetchAPI("/posts");

    return { props: { posts: res.data } };
}

export default async function Page() {
    const {
        props: { posts },
    } = await getData();

    return (
        <div>
            <div>{posts[0].attributes.title}</div>
            <div>{posts[0].attributes.content}</div>
            <button className="w-24">버튼</button>
        </div>
    );
}

posts :>>  [
  {
    id: 9,
    attributes: {
      title: '테스트',
      views: 0,
      createdAt: '2023-07-04T06:39:17.768Z',
      updatedAt: '2023-07-04T07:19:52.623Z',
      publishedAt: '2023-07-04T07:19:52.205Z',
      keyword: '안녕, 하, 세, 요',
      content: '# 테스트입니다.\n\n이걸활용하여 만들예정\n'
    }
  },
  {
    id: 10,
    attributes: {
      title: '제목입니다.',
      views: 0,
      createdAt: '2023-07-04T09:25:27.441Z',
      updatedAt: '2023-07-04T09:26:38.924Z',
      publishedAt: '2023-07-04T09:26:38.507Z',
      keyword: '세법, ',
      content: '# 안녕하세요\n\n##  부제\n\n###  부제목\n\n> 안녕하세요.\n\n'
    }
  }
]

-  ┌ GET /?_rsc=21d2751 200 in 47ms
   │
   └──── GET https://tremendous-tabbi../api/posts 200 in 1ms (cache: HIT)

정상적으로 data가 들어온다. 이제 화면을 그려주면 되겠지.

결론

back-end와 front-end의 통신을 자급자족으로 이뤄냈다. 이제 본업인 UI를 그려야하는데, 힘내보자

nextjs + tailwind css + pico css