First, thanks for putting this together. It looks very much like what I need (and what I was about 1/3 of the way through putting together).

I do have one question, though. I didn't see any examples in the project of how to protect a route from access by unauthenticated users. Maybe I overlooked it?

I've tried a couple of things, mostly around checking the props.session value in various methods (constructor, render, getInitialProps) of the page component. These work, but there's an annoying flicker as the page is rendered and then the router is redirected to the /auth/signin page. I could do some conditional rendering (eg. an unauthorized message) if the user is not authorized, but there's still going to be that moment where the message is rendered and then the transition is made to the new page.

Thanks for your help!

Hi @iaincollins , Thank you for this starter. I wanna ask about data fetching on async example. i saw you are fetching the data in https://github.com/iaincollins/nextjs-starter/blob/master/pages/async.js#L21 and https://github.com/iaincollins/nextjs-starter/blob/master/pages/async.js#L40. So it will fetch the data twice when user opened that page? L21 will be called on server side and L40 will be called on client side.

Hi,

Is it normal for the dev compilation to take up to 12 seconds to compile each page?

Reproduce: npm run dev Click an item from the example drop down menu and wait for page to load.

Thanks!

Something strange happened to me: suddenly I get an error from the session component, "XMLHttpRequest is not defined". When I added global.XMLHttpRequest = require ("xmlhttprequest"); Back to the file, I get another error: These modules were not found:

• child_process in ./node_modules/xmlhttprequest/lib/XMLHttpRequest.js
• fs in ./node_modules/xmlhttprequest/lib/XMLHttpRequest.js

Hello,

I am trying to fetch user bookmarks from the server.

when send request on the client side, we can access user object by req.user. Is there any way to get access to the user object when send request via getInitialProps.

Thanks.

// model/user.js

const UserSchema = new mongoose.Schema({
  _id: mongoose.Schema.Types.ObjectId,
  bookmarkIds: [{ref:'Bookmark', ...}]
  ......
});

//pages/index.js

export default class extends Page {
  static async getInitialProps({req}) {
    const props = await super.getInitialProps({ req });
    
    if (isServer) {
      fetch('http://localhost:3000/api/test', { method: 'GET', credentials: 'include' })
        .then((res) => res.json())
        .then(console.log);
    }
    return props
  }
}

routes/test.js

module.exports = (expressApp) => {
  expressApp.get('/api/test', (req, res) => {

    console.log(req.user)        // undefined

    const result = {}            // fetch user bookmarks...

    res.send(result);
  });
};

git clone https://github.com/iaincollins/nextjs-starter.git npm install npm run dev

nextjs-starter@6.0.3 postinstall /www/clients/nextjs/nextjs-starter next build

waiting, nothing past this point

any thoughts?

Unfortunately, this starter is not compatible with IE11 - it fails both in DEV and PROD modes. It's acceptable for DEV mode, as webpack-hot-middleware is not compatible. However, in PROD mode I'd expect IE11 to work well.

Steps to reproduce:

1. Run with npm run start and open in IE11 or simply open https://nextjs-starter.now.sh/ in IE11
2. First, it shows the website content, then returns "HTTP Error" page with the following error in the console:

Syntax error
SyntaxError: Syntax error
   at Anonymous function (https://nextjs-starter.now.sh/_next/8766e2d8101f161d4f7a9eec13b034f3/app.js:269:103573)
   at t (https://nextjs-starter.now.sh/_next/8766e2d8101f161d4f7a9eec13b034f3/app.js:269:102041)
   at eval code (eval code:2:22)
   at Anonymous function (https://nextjs-starter.now.sh/_next/8766e2d8101f161d4f7a9eec13b034f3/app.js:269:102499)
   at t (https://nextjs-starter.now.sh/_next/8766e2d8101f161d4f7a9eec13b034f3/app.js:269:102041)
   at Anonymous function (https://nextjs-starter.now.sh/_next/8766e2d8101f161d4f7a9eec13b034f3/app.js:269:102411)
   at Anonymous function (https://nextjs-starter.now.sh/_next/8766e2d8101f161d4f7a9eec13b034f3/app.js:269:101935)
   at n (https://nextjs-starter.now.sh/_next/8766e2d8101f161d4f7a9eec13b034f3/app.js:269:101591)
   at Anonymous function (https://nextjs-starter.now.sh/_next/8766e2d8101f161d4f7a9eec13b034f3/app.js:269:101567)
   at t (https://nextjs-starter.now.sh/_next/8766e2d8101f161d4f7a9eec13b034f3/app.js:1:436)

Perhaps, some polyfill is required but I don't know how to identify it. Could you please fix it or at least help to understand which polyfill is required?

I cannot seem to find any documentation on how to actually setup the authentication or the email setup. I have filled in the appropriate .env files but I cannot seem to figure out how to get this project to associated my MongoDB with users, or where a model would be to map this information. I filled out the config in the docs and if I try and signup it says it will send an email, however since this does not happen out of the box I assume you have to config sendgrid or some other service that will actually do that. Because of that I cannot login and thus cannot test authentication. I understand I do not know everything about how this works which is why I am hoping for some documentation.

Hi @iaincollins

Saw the issue that you made (#45) and I would like to give a hand on it. This PR is pretty much just replacing XMLHttpRequest to use unfetch. Let me know if this is good for you 😃

I have trouble with connect between collection in mongoclient and i want to use the mongoose populate function. can i replace the mongoclisnt with mongoose?

The Session component works perfectly fine, well am considering refactoring it in a more typical React/Redux pragma by using a Store as a practical usage example.

The Clock demo that's included (from the official wiki) uses a Store and connect() but it's not the easiest (or most re-useable) example to follow.

I can't see a huge practical benefit from the point of view of application behaviour and I'm not sure if this would make the logic easier to follow, more bloated, or even make the logic harder to follow, but it's an established pragma so seems worth considering.

(I already use a Store with connect() for session handling in another project, I'm just not quite sure the pragma is justified over using more easily readable vanilla JS for the same thing).

I am also tempted to set up an event handler to listen for events on the session store and/or fire server events showing how that if you perform an action (like sign in or out) in one tab/window that it can automatically update other tabs/windows.

Comments/suggestions around this welcome.

This project is now archived and is no longer maintained.

I'm happy so many people found this project useful, but it's now out of date and many of the features of this starter project are now redundant as Next.js has evolved considerably over the last few years and now has native support for features such as CSS and SASS and for API routes without requiring a custom server.

For that reason I'm retiring this project and putting it into archive mode.

Thank you to everyone who contributed to this project over the last 3 years!

Where to look for examples

• You can find up to date examples of how to use Next.js at https://github.com/vercel/next.js

• For an example of how to add authentication to Next.js project, check out NextAuth.js at https://next-auth.js.org

  There is a NextAuth.js example project with live demo at http://next-auth-example.now.sh

Describe the bug Deployment attempt produces an error

To Reproduce Follow instructions in README

Expected behavior A deployed website

Node version, NPM version and Operating System and version Node: 13.7.0 NPM: 6.14.1 OS: OSX 10.14.6

Additional context

First of all, the project includes a now.json that contains bad information. Names are no longer used and the version is set to 1, causing Now to refuse deployment. I simply deleted the file and ran now but then i puked with the following:

2020-04-07T00:06:37.615Z Error: Found engines in package.json with an invalid Node.js version range: "8.11.x". 2020-04-07T00:06:37.615Z Please set "engines": { "node": "12.x" } in your package.json file to upgrade to Node.js 12. Learn more: https://zeit.co/docs/runtimes#official-runtimes/node-js/node-js-version

after patching the package.json as instructed Now fails with the following:

2020-04-07T00:09:43.170Z Error: No serverless pages were built. https://err.sh/zeit/now/now-next-no-serverless-pages-built 2020-04-07T00:09:43.170Z at Object.module.exports.178.exports.build (/zeit/f8b3553cce6cf4b4/.build-utils/.builder/node_modules/@now/next/dist/index.js:4041:19) 2020-04-07T00:09:43.170Z at async buildStep (/var/task/sandbox-worker.js:20371:20) 2020-04-07T00:09:43.170Z at async mainSub (/var/task/sandbox-worker.js:20116:9) 2020-04-07T00:09:43.170Z at async main (/var/task/sandbox-worker.js:20023:5)

so I guess Now expects something this project isn't providing. clue anyone?

Describe the bug Sign in / auth doesn't work for neither google nor email sign up/in.

To Reproduce Deploying to AWS EC2 ubuntu 18-04 instance: Populate the .env file with real data such as SERVER_URL=http://ec2-3-10-198-176.eu-west-2.compute.amazonaws.com/ ... GOOGLE_ID GOOGLE_SECRET= ...

Expected behavior Redirect user to either previous page or logged in page, and show that the user is signed in. Instead it takes user to Page not found '_error' does not exist, and console error with replaceState cannot be executed on the origin.

Node version, NPM version and Operating System and version nodejs v12.16.1 npm version 6.13.4 Operating system: Ubuntu 18.04

Additional context

Logs:

Failed to load resource: the server responded with a status of 404 (Not Found) main-e42bb1aba7f66664c61d.js:1 Failed to execute 'replaceState' on 'History': A history state object with URL 'http://auth/email/signin/4337b7cf-4aa0-4a5a-85ca-8280890e38e3' cannot be created in a document with origin 'http://ec2-3-10-198-176.eu-west-2.compute.amazonaws.com' and URL 'http://ec2-3-10-198-176.eu-west-2.compute.amazonaws.com//auth/email/signin/4337b7cf-4aa0-4a5a-85ca-8280890e38e3'. Error: Failed to execute 'replaceState' on 'History': A history state object with URL 'http://auth/email/signin/4337b7cf-4aa0-4a5a-85ca-8280890e38e3' cannot be created in a document with origin 'http://ec2-3-10-198-176.eu-west-2.compute.amazonaws.com' and URL 'http://ec2-3-10-198-176.eu-west-2.compute.amazonaws.com//auth/email/signin/4337b7cf-4aa0-4a5a-85ca-8280890e38e3'. at e.value (http://ec2-3-10-198-176.eu-west-2.compute.amazonaws.com/_next/static/chunks/commons.913a7d85cefec260cf27.js:72:11510) at new e (http://ec2-3-10-198-176.eu-west-2.compute.amazonaws.com/_next/static/chunks/commons.913a7d85cefec260cf27.js:72:8219) at i (http://ec2-3-10-198-176.eu-west-2.compute.amazonaws.com/_next/static/chunks/commons.913a7d85cefec260cf27.js:72:5262) at t.createRouter (http://ec2-3-10-198-176.eu-west-2.compute.amazonaws.com/_next/static/chunks/commons.913a7d85cefec260cf27.js:18:6669) at http://ec2-3-10-198-176.eu-west-2.compute.amazonaws.com/_next/static/runtime/main-e42bb1aba7f66664c61d.js:1:1938 at w (http://ec2-3-10-198-176.eu-west-2.compute.amazonaws.com/_next/static/chunks/commons.913a7d85cefec260cf27.js:48:55892) at Generator._invoke (http://ec2-3-10-198-176.eu-west-2.compute.amazonaws.com/_next/static/chunks/commons.913a7d85cefec260cf27.js:48:55680) at Generator.e. [as next] (http://ec2-3-10-198-176.eu-west-2.compute.amazonaws.com/_next/static/chunks/commons.913a7d85cefec260cf27.js:48:56071) at r (http://ec2-3-10-198-176.eu-west-2.compute.amazonaws.com/_next/static/chunks/commons.913a7d85cefec260cf27.js:18:8454) at l (http://ec2-3-10-198-176.eu-west-2.compute.amazonaws.com/_next/static/chunks/commons.913a7d85cefec260cf27.js:18:8652)

Bug report

We have some problem on our server. After some time of execution we have an out of memory error on our server. So I tried to reproduce on my computer. I create a clean project just use nextjs-starter. and build it.run it using pm2, after one three to see if the memory increase. Here is the memory evolution :

pm2 monit show like this:

Describe the bug

you can see the heap size awaly increasing when i use loadtest request

To Reproduce

1. git clone https://github.com/iaincollins/nextjs-starter

2. cd nextjs-starter

3. npm i

4. add pm2.config.js file

     const pkg = require("./package.json");
   
     module.exports = {
          apps: [
              {
                   name: pkg.name,
                   script: "index.js",
                   instances: 1,
                   exec_mode: "cluster",
                   watch: false,
                   node_args: "--inspect --expose-gc",
                   max_memory_restart: "1500M",
                   env: {
                        NODE_ENV: "development",
                        BUILD_ENV: "test",
                        RUNTIME_ENV: "test",
                   },
                   env_test: {
                        NODE_ENV: "production",
                        BUILD_ENV: "test",
                        RUNTIME_ENV: "test",
                  },
             },
         ],
   };
   

5. npm run build

6. pm2 start pm2.config.js

7. loadtest -c 30 --rps 20 http://localhost:80

8. you can use pm2 monit or chrome://inspect See error I also use express test, it is ok!

system information

 OS: macOS
 Version of pm2: 4.2.1
 Version of loadtest: 4.1.0

Additional context

  use pm2 log see node inspect port

Describe the bug A clear and concise description of what the bug is. Running npm install fails and shows the following error

The engine "node" is incompatible with this module. Expected version "8.11.x". Got "12.14.0"

To Reproduce Steps to reproduce the behaviour. use latest version of node and try running npm install

Expected behavior A clear and concise description of what you expected to happen.

Ideally, it should work as far as it is using version > 8.11.x

Node version, NPM version and Operating System and version

node version: 12.14.0 npm version: 6.13.4 OS: macOS Mojave 10.14.6

Note: If you are using Microsoft Windows please see existing issues before opening a new ticket as it's likely the issue you have is specific to Windows.

Additional context Add any other context about the problem here.

Describe the bug When you run the steps documented under Running locally in development mode, it will fail installing the packages because package-lock.json is present.

In order to fix this you can either:

1. Remove package-lock.json before you run npm install
2. Stop tracking package-lock.json so you don't need to run rm package-lock.json before npm install.

To Reproduce Run the commands documented under section: Running locally in development mode.

Expected behavior I want to be able to run the commands documented under section: Running locally in development mode without errors.

Node version, NPM version and Operating System and version

Node 13.1.0 npm 6.13.1 macOS 10.15.1