How to build a To-do Application using Next.js and Strapi

1

This article is a guest post by Chidume Nnamdi. He wrote this blog post through the Write for the Community program. If you are passionate about everything jamstack, open-source or javascript and want to share, join the writer's guild!

This is a companion discussion topic for the original entry at https://strapi.io/blog/how-to-build-a-to-do-app-using-next-js-and-strapi
2

Hi there. Do you have a demo where you connected to app to an external auth provider?

3
4

Hi Petrus,
No, I don’t have a demo for that yet. But the links below can help you:

5

Let me know if you need any other thing.

1 Like
6

Hi there, just found you wrote lots of code in ‘setTodos’ in your delete/add/update function.
There is no need to do so, you can add [count, setCount] = useState(0) ,use count as your dependency pass to useEffect. When you delete/add/update your todoItem ,just change count like setCount(count+1) to make useEffec updating.

7

Thanks for the article. I followed along with fresh installs but after adding the code to the index.js file and running the server I get the following error:

Unhandled Runtime Error
TypeError: destroy is not a function

Call Stack
safelyCallDestroy
node_modules\react-dom\cjs\react-dom.development.js (22831:0)
commitHookEffectListUnmount
node_modules\react-dom\cjs\react-dom.development.js (22999:0)
invokePassiveEffectUnmountInDEV
node_modules\react-dom\cjs\react-dom.development.js (25097:0)

The error goes away and I’m able to see the form if I comment out the useEffect function on like 9 of the index.js file. But of course then form is not able to add a todo item.

Also, the index.js file refers to the url without the api. So http://localhost:1337/todos should be http://localhost:1337/api/todos

Is there a more up to date tutorial on this?