Migrating a notebook app from react to Next.js

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 ・ 1 min read

#typescript
…


This content originally appeared on DEV Community and was authored by Muhammad Ahmad

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

m_ahmad image

Create a Notebook app with React, ChakraUi, and framerMotion

Muhammad Ahmad ・ Apr 2 ・ 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


This content originally appeared on DEV Community and was authored by Muhammad Ahmad


Print Share Comment Cite Upload Translate Updates
APA

Muhammad Ahmad | Sciencx (2021-05-29T17:27:24+00:00) Migrating a notebook app from react to Next.js. Retrieved from https://www.scien.cx/2021/05/29/migrating-a-notebook-app-from-react-to-next-js/

MLA
" » Migrating a notebook app from react to Next.js." Muhammad Ahmad | Sciencx - Saturday May 29, 2021, https://www.scien.cx/2021/05/29/migrating-a-notebook-app-from-react-to-next-js/
HARVARD
Muhammad Ahmad | Sciencx Saturday May 29, 2021 » Migrating a notebook app from react to Next.js., viewed ,<https://www.scien.cx/2021/05/29/migrating-a-notebook-app-from-react-to-next-js/>
VANCOUVER
Muhammad Ahmad | Sciencx - » Migrating a notebook app from react to Next.js. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/29/migrating-a-notebook-app-from-react-to-next-js/
CHICAGO
" » Migrating a notebook app from react to Next.js." Muhammad Ahmad | Sciencx - Accessed . https://www.scien.cx/2021/05/29/migrating-a-notebook-app-from-react-to-next-js/
IEEE
" » Migrating a notebook app from react to Next.js." Muhammad Ahmad | Sciencx [Online]. Available: https://www.scien.cx/2021/05/29/migrating-a-notebook-app-from-react-to-next-js/. [Accessed: ]
rf:citation
» Migrating a notebook app from react to Next.js | Muhammad Ahmad | Sciencx | https://www.scien.cx/2021/05/29/migrating-a-notebook-app-from-react-to-next-js/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts