Next.js: Please update the Github Pages deployment wiki

[xixixao]

This page: https://github.com/zeit/next.js/wiki/Deploying-a-Next.js-app-into-GitHub-Pages

Should include the following:

For all sites

Create next.config.js in your main folder with the following:

module.exports = {
  generateBuildId: async () => 'current',
};

This will prevent next from generating a new version of the site every time you run build. This is helpful since you'll likely be pushing out folder to your source gh-pages branch (see below).

For Project Page Sites

Fix your links by adding the following component to components/:

import Link from 'next/link'

// Fixes links by prepending linkPrefix when in deployed on Github
const PrefixedLink = ({ href, as = href, children }) => (
  <Link href={href} as={`${process.env.linkPrefix}${as}`}>
    {children}
  </Link>
)

export default PrefixedLink

And replace all import Link from 'next/link' in your code with import Link from 'next/link'

And use the following next.config.js:

const repoNameURIPrefix =
  process.env.NODE_ENV === 'production' ? '/your-repo-name' : '';

module.exports = {
  assetPrefix: repoNameURIPrefix,
  env: {
    linkPrefix: repoNameURIPrefix,
  },
  generateBuildId: async () => 'current',
};

Don't forget to replace your-repo-name with the actual name of your Github repository.

Pushing to GitHub Pages from a Subdirectory

In your next folder run something like:

git add out
git commit -m "Added built website"

To add the output folder and commit it. Then push it (from the root of your repo) to gh-pages branch:

git subtree push --prefix out origin gh-pages

If your next folder isn't at the root of your repo, you might need to replace out with the path to the out folder from the root of your repo (ie next-website/out).

See https://gist.github.com/cobyism/4730490 for more details.

[maysam]

where is the wiki pages? they are not working no more

[Timer]

We've removed the Wiki pages as all instructions have been moved to the Next.js docs.

https://nextjs.org/docs

[chemicalkosek]

Yeah, but there were some examples in Wiki that are not in the docs like redirecting within getInitialProps.

[maysam]

and there are also links to the missing wiki pages

[Timer]

@chemicalkosek Redirecting in getInitialProps is an anti-pattern that we do not recommend anymore, so it was removed.

[Timer]

and there are also links to the missing wiki pages

Could you please point out the resources that need updated?

[maysam]

"See the section in Next docs about deployment for more information."

in https://github.com/zeit/next.js/blob/canary/packages/create-next-app/templates/default/README.md

[chemicalkosek]

@chemicalkosek Redirecting in getInitialProps is an anti-pattern that we do not recommend anymore, so it was removed.

Well, how else would we redirect server-side? I saw your answer here https://github.com/zeit/next.js/issues/4931#issuecomment-512787861, so I assume we just should move the client-side redirect to useEffect but the usual server-side redirect should be held within getIntialProps with if (res) { res.writeHead ... } . I'm doing some checks within getInitialProps and wouldn't like for the user to see the redirects on screen and instead have it sometimes handled server-side.

[grudelsud]

thanks for sharing @xixixao this (almost) works really well!

My project is on ${customDomain}/${githubRepo} and I had a little problem re. your point:

Fix your links by adding the following component to components/:

import Link from 'next/link'

// Fixes links by prepending linkPrefix when in deployed on Github
const PrefixedLink = ({ href, as = href, children }) => (
  <Link href={href} as={`${process.env.linkPrefix}${as}`}>
    {children}
  </Link>
)

export default PrefixedLink

And replace all import Link from 'next/link' in your code with import Link from 'next/link'

I have to use dynamic routing, which means I updated my component to use the Link as defined above, in a context like the following:

const CategoryLink = ({ name }) => (
  <Link href="/category/[name]" as={`/category/${name}`}>
    <a>{name}</a>
  </Link>
);

[EDIT: updated to fix the prefetch error]

unfortunately the custom Link component caused an error and wouldn't follow the link. The error I got was https://github.com/zeit/next.js/blob/master/errors/incompatible-href-as.md

I updated the custom Link component as follows:

import Link from 'next/link'

// Fixes links by prepending linkPrefix when in deployed on Github
const PrefixedLink = props => {
  const href = `${process.env.linkPrefix}${props.href}`;
  const as = props.as ? `${process.env.linkPrefix}${props.as}` : href;
  return (
    <Link
      href={href}
      as={as}
      passHref={props.passHref || false}
      prefetch={props.prefetch || false}>
      {props.children}
    </Link>
    )
}

export default PrefixedLink

this works fine: Links are followed correctly and navigation is ok, and also sets the default prefetch prop to false, which is useful for static exports.

I still have errors on the console though, whenever I hover on any link on the page

[tommoor]

It seems the deployment instructions for Github Pages were now completely removed, there's nothing in the NextJS docs site about it?

[ImSolitude]

Where did the instructions for Github Pages go!