I created a notebook app in react a few months ago. I wrote article about it.

Create a Notebook app with React, ChakraUi, and framerMotion

Muhammad Ahmad ・ Apr 2 '21 ・ 1 min read

#typescript #react #webdev #javascript

Now I migrated this app to Next.js smoothly.
Here are the few steps that will guide you how i did this.

Step 1

Installed next in my project:

yarn add next 

Step 2

Updated package.json with the following scripts:

"scripts": { "dev": "next dev", "build": "next build", "start": "next start" } 

Step 3

Created pages folder:

src/pages/_app.tsx src/pages/index.tsx src/pages/projects/index.tsx 

Step 4

Migrated code:

from src/index.tsx and src/app.tsx to src/pages/index.tsx and src/pages/_app.tsx 

Note: I didn't copy paste code here.

Step 5

Deleted these files:

src/index.tsx src/app.tsx 

Final step

• Used next/router.
• Replaced chakra links and react-router-dom links with next/link in different files.

App

Demo Link: Notebook
GitHub Repo: Repo