I have followed the instructions here in https://guess-js.github.io/docs/next.
First run the command:
mkdir guess-next && cd guess-next && touch package.json
Then fill the /package.json with:
{
"name": "guess-next",
"scripts": {
"start": "next",
"build": "next build",
"export": "npm run build && next export -o guess"
},
"dependencies": {
"next": "^6.1.1",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"guess-webpack": "^0.1.6"
}
}
Then run the command:
npm i
Then run the command:
mkdir components && cd components && touch layout.js
Then fill the /components/layouts.js with:
import { withRouter } from 'next/router';
import { guess } from 'guess-webpack/api';
import Link from 'next/link';
import Head from 'next/head';
const layout = ({ router, children, title = ' Next.js + Guess.js' }) => {
if (typeof window !== 'undefined')
Object.keys(guess()).forEach(p => router.prefetch(p));
return (
<div>
<Head>
<title>{title}</title>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<header>
<nav>
<Link href="/">
<a>Home</a>
</Link>{' '}
<Link href="/example">
<a>Example</a>
</Link>{' '}
<Link href="/about">
<a>About</a>
</Link>
</nav>
</header>
<div className="content">{children}</div>
</div>
);
};
export default withRouter(layout);
Then create directory named: pages in the root.
Then create the files inside the directory created.
pages/
├── about.js
├── example.js
├── index.js
└── media.js
Then fill the content of each file like below (Only change the [PAGE_NAME] depending on the page):
import * as React from 'react';
import Layout from '../components/layout';
export default () => (
<Layout>
[PAGE_NAME]
</Layout>
);
Then for media.js put the content of:
import * as React from 'react';
import Layout from '../components/layout';
import Link from 'next/link';
export default () => (
<Layout>
About
<br />
You can find the{' '}
<Link href="/media">
<a>media page here</a>
</Link>
</Layout>
);
Then inside next.config.js file put:
const { GuessPlugin } = require('guess-webpack');
module.exports = {
webpack: function(config, { isServer }) {
if (isServer) return config;
config.plugins.push(
new GuessPlugin({
reportProvider() {
return Promise.resolve(JSON.parse(require('fs').readFileSync('./routes.json')));
}
})
);
return config;
}
};
Then inside routes.json put:
{
"/": {
"/example": 80,
"/about": 20
},
"/example": {
"/": 20,
"/media": 0,
"/about": 80
},
"/about": {
"/": 20,
"/media": 80
},
"/media": {
"/": 33,
"/about": 33,
"/example": 34
}
}
And finally run the commands:
npm run build && npm run start
Now when I open the browser to open the localhost:3000, the next.js is working and I can navigate to different pages, but the problem is that it doesn't prefetch the other pages.
My cache is disabled.
In the /components/layouts.js file, I even added this line below to check if it works statically:
router.prefetch('/index.js')
router.prefetch('/example.js')
router.prefetch('/about.js')
router.prefetch('/media.js')
No luck.
UPDATE
I got that it is receiving the data in protocol http1.1, can this be the problem? How to convert it to http2.