#26 Migrate to nextjs

[PedroJesusRomeroOrtega]

Hello. I have done the migration to nextjs:

• uninstall react-router and router.tsx
• install next js
• modify package.json
• tsconfig.json
• modify babel
• move index.tsx, app.tsx to pages directory
• changed all components to export default
• enabled server friendly urls
• removed react-hot-loader
• uninstall webpack

Feel free to tell me if something is missing.

[brauliodiez]

About folder structure, we have to take into account:

• pages subfolder should contain only pages (all that files are public and can be accessed via browser just by tpying the URL.
• We have to create a file per page (if we use subfolders we have to be aware that all subcomponents will be accessible via url we have to place them in a separate folder).

Something like:

├───components
│   ├───pageA
│   │       index.tsx
│   │       dummy.spec.tsx
│   │
│   └───pageB
│           index.tsx
│
├───pages
│       index.tsx
│       pageB.tsx

About file content proposal:

_./src/components/pageA/index.tsx

import * as React from 'react';
import Link from 'next/link';

const PageAComponent: React.StatelessComponent = () => (
  <div>
    <h1>Page A</h1>
    <Link as="pageB" href="/pageB">
      <a>Page B</a>
    </Link>
  </div>
);

export default PageAComponent;

_./src/components/pageB/index.tsx

import * as React from 'react';
import Link from 'next/link';

const PageBComponent: React.StatelessComponent = () => (
  <div>
    <h1>Page B</h1>
    <Link as="pageA" href="/">
      <a>Page A</a>
    </Link>
  </div>
);

export default PageBComponent;

_./src/pages/index.tsx

import * as React from 'react';
import PageAComponent from '../components/pageA';

const PageA = () =>
  <PageAComponent/>;

export default  PageA;

_./src/pages/pageB.tsx

import * as React from 'react';
import PageBComponent from '../components/pageB';

const PageB = () =>
  <PageBComponent/>;

export default  PageB;

[brauliodiez]

A question from my side, what are the right steps to configure next to have it's pages source code located under the src folder?

[PedroJesusRomeroOrtega]

@brauliodiez , about your question "A question from my side, what are the right steps to configure next to have it's pages source code located under the src folder?" In my opinion, the best place is when you call to next in server.js

const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
==> const app = next({ dir: './src', dev });  <==
const handle = app.getRequestHandler();

app
  .prepare()
  .then(() => {
    const server = express();