<p>I created a notebook app in react a few months ago. I wrote article about it.</p>
<p>{% link https://dev.to/m_ahmad/create-a-notebook-app-with-react-charaui-and-framermotion-dej %}</p>
<p>Now I migrated this app to Next.js smoothly.
Here are the few steps that will guide you how i did this.</p>
<h1>Step 1</h1>
<p>Installed <code>next</code> in my project:</p>
<div><pre><code>yarn add next</code></pre></div>
<h1>Step 2</h1>
<p>Updated <code>package.json</code> with the following scripts:</p>
<div><pre><code>&#x26;quot;scripts&#x26;quot;: {
  &#x26;quot;dev&#x26;quot;: &#x26;quot;next dev&#x26;quot;,
  &#x26;quot;build&#x26;quot;: &#x26;quot;next build&#x26;quot;,
  &#x26;quot;start&#x26;quot;: &#x26;quot;next start&#x26;quot;
}</code></pre></div>
<h1>Step 3</h1>
<p>Created pages folder:</p>
<div><pre><code>src/pages/_app.tsx
src/pages/index.tsx
src/pages/projects/index.tsx</code></pre></div>
<h1>Step 4</h1>
<p>Migrated code:</p>
<div><pre><code>from src/index.tsx and src/app.tsx
to src/pages/index.tsx and src/pages/_app.tsx</code></pre></div>
<blockquote>
<p>Note: I didn't copy paste code here.</p>
</blockquote>
<h1>Step 5</h1>
<p>Deleted these files:</p>
<div><pre><code>src/index.tsx
src/app.tsx</code></pre></div>
<h1>Final step</h1>
<ul>
<li>Used <code>next/router</code>.</li>
<li>Replaced <code>chakra links</code> and <code>react-router-dom links</code> with <code>next/link</code> in different files.</li>
</ul>
<h1>App</h1>
<p><strong>Demo Link:</strong> <a href="https://next-notebook.vercel.app/">Notebook</a>
<strong>GitHub Repo:</strong> <a href="https://github.com/MA-Ahmad/next-notebook">Repo</a></p>


<p>I created a notebook app in react a few months ago. I wrote article about it.</p>


<div class="ltag__link">
  <a href="/m_ahmad" class="ltag__link__link">
    <div class="ltag__link__pic">
      <img src="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" alt="m_ahmad" loading="lazy">
    </div>
  </a>
  <a href="/m_ahmad/create-a-notebook-app-with-react-charaui-and-framermotion-dej" class="ltag__link__link">
    <div class="ltag__link__content">
      <h2>Create a Notebook app with React, ChakraUi, and framerMotion</h2>
      <h3>Muhammad  Ahmad ・ Apr 2 '21 ・ 1 min read</h3>
      <div class="ltag__link__taglist">
        <span class="ltag__link__tag">#typescript</span>
        <span class="ltag__link__tag">#react</span>
        <span class="ltag__link__tag">#webdev</span>
        <span class="ltag__link__tag">#javascript</span>
      </div>
    </div>
  </a>
</div>


<p>Now I migrated this app to Next.js smoothly. <br>
Here are the few steps that will guide you how i did this.  </p>
<h1>
  <a name="step-1" href="#step-1">
  </a>
  Step 1
</h1>

<p>Installed <code>next</code> in my project:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>yarn add next
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<h1>
  <a name="step-2" href="#step-2">
  </a>
  Step 2
</h1>

<p>Updated <code>package.json</code> with the following scripts:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<h1>
  <a name="step-3" href="#step-3">
  </a>
  Step 3
</h1>

<p>Created pages folder:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>src/pages/_app.tsx
src/pages/index.tsx
src/pages/projects/index.tsx
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<h1>
  <a name="step-4" href="#step-4">
  </a>
  Step 4
</h1>

<p>Migrated code:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>from src/index.tsx and src/app.tsx
to src/pages/index.tsx and src/pages/_app.tsx
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<blockquote>
<p>Note: I didn't copy paste code here.</p>
</blockquote>

<h1>
  <a name="step-5" href="#step-5">
  </a>
  Step 5
</h1>

<p>Deleted these files:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>src/index.tsx
src/app.tsx
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<h1>
  <a name="final-step" href="#final-step">
  </a>
  Final step
</h1>

<ul>
<li>Used <code>next/router</code>. </li>
<li>Replaced <code>chakra links</code> and <code>react-router-dom links</code> with <code>next/link</code> in different files.</li>
</ul>

<h1>
  <a name="app" href="#app">
  </a>
  App
</h1>

<p><strong>Demo Link:</strong> <a href="https://next-notebook.vercel.app/">Notebook</a><br>
<strong>GitHub Repo:</strong> <a href="https://github.com/MA-Ahmad/next-notebook">Repo</a></p>



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](https://next-notebook.vercel.app/)
**GitHub Repo:** [Repo](https://github.com/MA-Ahmad/next-notebook)

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

Migrating a notebook app from react to Next.js

Step 1

Step 2

Step 3

Step 4

Step 5

Final step

App