# Next.js

**Category:** Guides

##  

**Next.js** is replacing the Yoshi fullstack flow.\
It's not yet officially supported by the infra team, however early adopters can try it out using the WIX [Next.js template](https://github.com/wix-private/nextjs-playground/tree/master/packages/nextjs-template).

### Integration with Patterns

Patterns support Next.js with some limitations:

- Patterns don’t support SSR which means that NextJS will not be able to compile it as a server component, Patterns can be used only in the CSR mode.

### Getting started

- Install the following dependencies

```diff
"dependencies": {
+  "@wix/patterns": "^2.657.0",
   "@wix/design-system": "^1.70.0",
   "next": "^12.3.4",
+  "next-global-css": "^1.3.1",
+  "webpack-node-externals": "^3.0.0"
}
```

- Modify the `next.config.js`

```diff
+  const { patchWebpackConfig } = require('next-global-css');
+  const webpackNodeExternals = require('webpack-node-externals');

const nextConfig = {
   webpack: (config, options) => {
+    patchWebpackConfig(config, options);
+    if (options.isServer) {
+      config.externals = webpackNodeExternals({
+        allowlist: [/design-system/],
+      });
+    }

    return config;
   }
};

module.exports = nextConfig;
```

- Create Patterns application and wrap it up with the `Next.js` dynamic import.\
  Patterns don't support SSR, attempting to compile it in the SSR mode will cause the Next.js exception.

```diff
+++ /pages/index.tsx
const Index: NextPage = () => {
  return (
    <>
      
        Create Next App
        
      
+     
    
  );
};

export default Index;

+++ /components/PatternsDynamicComponent.tsx
+ import dynamic from 'next/dynamic';
+ import { Box, Loader } from '@wix/design-system';

+ export const PatternsDynamicComponent = dynamic(
+   () => import('./PatternsComponent').then(({ PatternsComponent }) => PatternsComponent),
+   {
+     ssr: false, // Here we instruct Next.js to compile it only as a client side component.
+     loading: () => (
+       
+         
+       
+     )
+   }
+ );

+++ /components/PatternsComponent.tsx
+ import { WixPatternsEssentialsProvider } from '@wix/patterns/essentials';
+ import { Box } from '@wix/design-system';
+ import { App } from './App';

+ export const PatternsComponent = () => {
+   return (
+     
+       
+         
+       
+     
+   );
};

```

### NextJS and Views feature

The `Views` feature uses an history object in order to put the viewId parameter in the URL.

The default history object that Patterns use is `import { createBrowserHistory } from 'history';`, but it conflicts with the NextJS router, which doesn't provide an history object itself.

If you want to use the views feature and NextJS, you should provide your own history object to Patterns, with `push` and `replace` properties from NextJS router, for example:

```js
import { WixPatternsEssentialsProvider } from '@wix/patterns/essentials';
import { Collection } from './Collection';
import { useRouter } from 'next/router'
import { WixPatternsContainerOverridesProvider } from '@wix/patterns';
import { useState } from 'react';
import { WixPatternsContainerParams } from '@wix/patterns/core';
import { createBrowserHistory } from '@wix/patterns/history';

export const Patterns = () => {
  const router = useRouter();
  const [wixPatternsContainerOverrides] = useState>(
    () => ({
      history: { ...createBrowserHistory(), push: router.push, replace: router.replace }
    }),
  );

  return (
    
      
        The children
      
    
  );
};
```

If you ignore this step, you may have issues with navigation from the collection page to other pages in your app.

For further technical details, please refer to the [Patterns NextJS example](https://github.com/wix-private/cairo/tree/master/examples/nextjs).