「オシーポップ」

Upgrading Your Code to Next.js

By: @OSHiiPOP

Posted: 03 | 10 | 25

Next.js is a powerful React framework that provides built-in server-side rendering, static site generation, and many other optimizations. If you are upgrading an existing React project to Next.js, follow these steps to ensure a smooth transition.

Installing Next.js

First, install Next.js along with React and ReactDOM:

npm install next react react-dom

If you're using Yarn:

yarn add next react react-dom

Update Package.json

Modify your package.json to include Next.js scripts:

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

Move Files to the Pages Directory

Next.js uses a file-based routing system. Move your existing components and pages inside a new pages/ directory.

For example, if you have:

src/
  components/
    Header.js
  App.js
  index.js

Refactor it into:

pages/
  index.js
components/
  Header.js

Then update pages/index.js:

import Header from '../components/Header';

export default function Home() {
  return (
    <div>
      <Header />
      <h1>Welcome to Next.js!</h1>
    </div>
  );
}

Convert React Router to Next.js Routing

If you're using React Router, replace it with Next.js's built-in routing.

Change this:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/about" component={About} />
        <Route path="/" component={Home} />
      </Switch>
    </Router>
  );
}

To this:

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/about">Go to About</Link>
    </div>
  );
}

Use getStaticProps or getServerSideProps

For fetching data, use Next.js's data-fetching methods.

Static Site Generation (SSG):

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
  };
}

Server-Side Rendering (SSR):

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
  };
}

By following these steps, you can smoothly transition your React project to Next.js and take advantage of its powerful features like server-side rendering and static site generation.

Share post via: