I particularly liked the below features -
- React Server Components that makes life simpler, but the coding process is much more efficient
- The new directory structure that simplifies routes. Layouts are intuitive and simple
- Love the new links (yes, I had to say this)
What lays hidden in the first statement is all the power hidden in React Server Component itself and that of streaming SSR. Combined with the new way of writing pages, I think this came closest for me to reconsider coding in React.
- Write server and client code in context of a component
- Do not worry about writing an entire backend infrastructure
- Smaller JS download sizes
- Execute faster with streaming SSR - UI that loads instantly and maintains performance for all the magical stuff in your app
With easy deployment options and the ability to serve many things from edge, NextJS is compelling for any new apps in the React world.
Time for a To-do app
Let us try out the new features with a simple to-do app written with -
- Pico CSS for styling
- PocketBase for backend
Create the NextJS app.
You may not want the experimental flag once the “app” directory and associated functions are main stream.
Install Pico CSS
You can just CDN into Pico CSS, a lightweight, easy-to-use CSS library that is perfect for experimental projects.
I just installed it for later use..
PocketBase is turning out to be a God send for me to quickly try out applications with a robust backend. PocketBase is written in Go, is extensible since it can also act as a framework, and has a good database (uses SQLite).
As the first step, download PocketBase executable. Store the exe in
<_root-folder_ > db.
You can serve PocketBase with -
You can access the database using automatic REST APIs, or use the JS SDK. We will use the SDK since we never know when our To do app will blow up.
Define data model in PocketBase
Once installed, you should be able to access the admin UI to create tables and enter dummy records in the database before you take your next gulp of your favourite drink.
Point your browser to
Click on them shiny buttons to create a table and a few columns.
Code the Todo app
It is time to write some magic.
Create layout and home page
_root-folder_ > app directory create a new file called ‘layout.tsx’.
layout.tsx will serve as our home page container. You can code in-
- All the elements that are common across components - e.g. Nav, etc.
- Include CSS - Pico CSS and any custom CSS that you fancy
Don’t forget to create
css directory if you have included a custom CSS statement.
Create another file called
page.tsx, which will serve as the root page of your app.
Execute your Next app if you are have not already done so and see your beautiful app..
You are now ready to add the core functionality.
Create a folder called
Add a new files called
page.tsx is the root page when you navigate to
localhost:3000/todos. There is simple code here to -
- Query todos from database
- Display the todos
- Enable creation of new todo through the
CreateTodocomponent (which we will create next)
Create another file called
CreateTodo.tsx in the same folder -
use client denotes that the
CreateTodo component needs to be interactive on the client. All the earlier components can execute code on server and send the results to the client, while
Other than the client interaction,
CreateTodo is ‘more or less’ standard React.
The code described so far should be good enough to complete all the things that the app needs to do. However, let us add a dynamic route just because we can. (Also, this will eliminate the errors if you have copied the code as is).
Create a directory
todos directory. Create a new file
You would have probably logged out by now, or know the drill..
page.tsxis the root page
- The component accepts a parameter from the caller to query for a particular todo record
- Display the todo
What is different is the
[id] tag that indicates that the component is dynamic (spare me the suprise look).
Lo & behold, you now have a to do app that can make the next million dollar SaaS app.
See complete code for this incomplete app on GitHub.
Why I will not switch to NextJS
I really like where NextJS is going. I see compelling reasons for using Next - the tooling, ease of deployment, and the massive community that tells me how my code is completely wrong and how I should be thinking about solving world hunger.
But again, ReactJS is not exactly my favourite way to write apps (yes, that’s me being stupid). Also -
- I still think ReactJS is a lot of boilerplate
- I don’t quite enjoy writing a lot of code to maintain state, render a list or do the thousand things that every web app has to do
- I don’t have to answer to anyone or collaborate with 100 people for my side projects
- I don’t have a massive library of UI components built out in React that can help me speed up the development process
Till I can check at least three of the above boxes, I will continue to code in either Vue or Svelte.