NextJS integration about suicrux HOT 9 CLOSED

Hi @cyrus-za. I'm currently working on razzle integration. Both razzle and next.js have the same concept of modify function for webpack config customization. So, yeah, nextjs integration seems possible

from suicrux.

@Metnew I know but https://github.com/Metnew/suicrux/tree/master/src/server :)

from suicrux.

It'd be cool to add example dir, like in Next/Razzle with simple examples of integration with different libs, but it makes sense only after working modify function. @malixsys

from suicrux.

@cyrus-za
I've recently made https://github.com/Metnew/next-semantic-ui-react, that could be interesting for you.

It's not a full clone of this boilerplate, just a SUIR + Next.js integration.

Fully migrate to next.js is almost impossible, too much config overwriting.

from suicrux.

Thanks @Metnew I look forward to see what you do with this package.

I am currently using RAN (https://github.com/Sly777/ran) and would love to get all the goodies that both RAN and SUICRUX offer.

from suicrux.

I was researching Razzle last few weeks and finally have some good and bad news:

• Good news: some Razzle internals(node-externals handling, dev mode) are integrated into boilerplate.
• Bad news: Razzle lacks plugin system. No concrete info about this "plugin system" exists in the repo.

More info about v3.0.0 release: https://github.com/Metnew/suicrux/releases/tag/v3.0.1

Next.js integration now is the primary task.
Both Razzle and Next have same Webpack re-configuration mechanism - modify function.
So, current razzle.config.js will be transformed to next.config.js.

The best case: Suicrux's Webpack config is encapsulated to modify function, which is compatible with Next, Razzle, and other libs.

from suicrux.

I’m using NestJS with NextJS: good fit... Maybe worth investigating?

from suicrux.

@malixsys thanks for the recommendation, I'll surely take a look, it looks interesting.
The only issue - it's a backend framework :)

from suicrux.

Serves nextJS perfectly and allows adding an API easily...

// server.js
import { NestFactory } from '@nestjs/core';
import { ApplicationModule } from './app.module';
import { GlobalExceptionFilter } from './app.exceptions';
import * as express from 'express';
import * as nextjs from 'next';
import * as helmet from 'helmet';
import * as cookieParser from 'cookie-parser';
import * as bodyParser from 'body-parser';

declare const process;

const port = process.env.PORT ? Number(process.env.PORT) : 3000;
const dev = process.env.NODE_ENV !== 'production';

const next = nextjs({ dev });
const handle = next.getRequestHandler();

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

    const app = await NestFactory.create(ApplicationModule, server);

    app.useGlobalFilters(new GlobalExceptionFilter());

    app.setGlobalPrefix('api');

    app.use(helmet());

    app.use(cookieParser());

    app.use(bodyParser.json({ limit: '50mb' }));

    app.use(bodyParser.urlencoded({ extended: false }));

    await app.init();

    server.get('*', (req, res) => handle(req, res));

    await app.listen(port);

    console.log(`> Ready on http://localhost:${port}`);
  });

from suicrux.