DEV Community

Željko Šević
Željko Šević

Posted on • Originally published at sevic.dev on

Migrating from CRA (create-react-app) to Next.js

#nextjs #react

I have recently migrated the React app bootstrapped with create-react-app to Next.js. The main reason was to improve SEO by making the app more indexable with Next.js, which enables server-side rendering.

This blog post will cover the necessary steps in the migration process.

Prerequisites

  • next package (version 13) should be installed
  • @next/eslint-plugin-next package should be installed as a dev dependency

Npm scripts

There should be three required scripts in package.json.

  • build builds the app for production usage (the app is built in .next directory).
  • dev runs the development server on the given port.
  • start runs the production server on the given port. 
{
  "scripts": {
    "build": "next build",
    "dev": "next dev -p 1234",
    "start": "next start -p 1234"
  }
}
Enter fullscreen mode Exit fullscreen mode

Environment variables

Environment variables should be prefixed with NEXT_PUBLIC_ so they can be used in the browser. dev and start scripts can use variables defined in .env.local and .env.production.local files, respectively.

// .env.local
NEXT_PUBLIC_API_URL=http://localhost:8080
Enter fullscreen mode Exit fullscreen mode

Linting

Update the eslint configuration to include the Next.js eslint plugin.

// .eslintrc.js
module.exports = {
  extends: ['plugin:@next/next/recommended'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2022,
    sourceType: 'module'
  }
};
Enter fullscreen mode Exit fullscreen mode

Head tags

Set page-shared meta and link tags within the root layout component (app/layout.jsx).

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <link rel="icon" href="/favicon.svg" />
        <link rel="manifest" href="/manifest.json" />
        <meta name="theme-color" content={THEME_COLOR} />
      </head>
      <body>{children}</body>
    </html>
  );
}
Enter fullscreen mode Exit fullscreen mode

Export page-specific meta tags within metadata variables inside server components. Client components have to use "use-client" directive.

export const metadata = {
  title: 'nextjs-starter',
  description: 'Minimal Next.js boilerplate',
};
Enter fullscreen mode Exit fullscreen mode

Routing and pages

Pages are associated with a route based on their file name, e.g., app/home/page.jsx is mapped to /home. Index page component is stored in app/page.jsx file.

Implement a custom Not found page in the app/not-found.jsx file. Replace the Link component from the React router with the Link component from the next/link.

Service worker

Register a service worker in the root layout component from app/layout.jsx file using the useEffect hook. Store it in the public folder.

'use client';

export default function RootLayout({ children }) {
  useEffect(() => {
    registerServiceWorker();
  }, []);

  // ...
}
Enter fullscreen mode Exit fullscreen mode

State management

This topic is covered in State management with Next.js and React post.

Course

Build your SaaS in 2 weeks - Start Now

Top comments (0)