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.

Need help with your project?

Get personalized advice on your architecture, code, or career in a 45-minute 1-on-1 consultation.

→ Book a consultation

Top comments (0)