🌤

Migrating a notebook app from react to Next.js

reactwebdevshowdevnextjs
Loading...
 

1

 

Published on

May 29, 2021

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

{% link https://dev.to/m_ahmad/create-a-notebook-app-with-react-charaui-and-framermotion-dej %}

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

React, comment and follow on