I created a notebook app in react a few months ago. I wrote article about it.
![m_ahmad](https://res.cloudinary.com/practicaldev/image/fetch/s--vrvEKvHu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--iCCO7GRa--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/370400/bda2fd3e-cb65-4abb-81e6-1f50edf567dd.png)
Create a Notebook app with React, ChakraUi, and framerMotion
Muhammad Ahmad ・ Apr 2 '21 ・ 1 min read
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
andreact-router-dom links
withnext/link
in different files.
Top comments (1)
Looks nice