menu

ZEIT

Our mission is to make cloud computing as easy and accessible as mobile computing. You can find our Next.js community here.

Channels
Team

Custom Express Server + Next.js Example

February 11, 2019 at 5:31pm
The ZEIT community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

Custom Express Server + Next.js Example

February 11, 2019 at 5:31pm
Took a swing at this...pretty sure I'm missing something simple...not sure if I need to separate the build step for the next.js and node lambda...I think this example would be helpful to peeps which require some custom express config in a next.js app and want to use now 2.0.
Any thoughts

February 11, 2019 at 5:35pm
If we are going full serverless, having a single .js to do the routing for us breaks that vision. It is better to work on "routes" + pages as per https://zeit.co/guides/custom-next-js-server-to-routes/
like-fill
1
  • reply
  • like
the roadblock I'm working up against is I want to leverage express + next.js in now 2.0...is this possible?
  • reply
  • like
the roadblock I'm working up against is I want to leverage express + next.js in now 2.0...is this possible?
It is not. But what is the need for the express.js server? Your PR, for example:
server.get("/a", (req, res) => {
return app.render(req, res, "/b", req.query);
});
server.get("/b", (req, res) => {
return app.render(req, res, "/a", req.query);
});
server.get("/posts/:id", (req, res) => {
return app.render(req, res, "/posts", { id: req.params.id });
});
server.get("*", (req, res) => {
return handle(req, res);
});
Could be translated to:
"routes": [
{ "src": "/a$", "dest": "/b" },
{ "src": "/b$", "dest": "/a" },
{ "src": "/posts/(.+)$", "dest": "/posts?id=$1" },
{ "src": "/(.*)$", "dest": "/$1" }
]
  • reply
  • like
If it was possible to wrap all pages into a single server.js file, the size would be very big and it would kill the purpose of lambdas. We need to be small, concise and do code-splitting as much as possible for better app performance. https://zeit.co/blog/customizable-lambda-sizes
  • reply
  • like
In this example, correct, it's not necessary...but I do need it in a more complex version which would add (passport, cookie-session, keygrip)
app.use(cors);
app.use(cookieParser());
app.use(bodyParser.json());
app.use(session);
passport.serializeUser((user, done) => {
done(null, typeof user === 'string' ? user : JSON.stringify(user));
});
passport.deserializeUser((data, done) => {
try {
const user = JSON.parse(data);
done(null, user);
} catch (err) {
done(err);
}
getUserById(data)
.then(user => {
done(null, user);
})
.catch(err => {
done(err);
});
});
app.use(passport.initialize());
app.use(passport.session());
like-fill
3
  • reply
  • like
this would go above the route configuration
  • reply
  • like
I see. This is not supported at the moment with the current /next builder. I recommend that you try to refactor it to use getInitialProps on every page for the intended behavior. If you are using some function in more than one place, you could centralize it in libs/xxxx.js and require it when needed. At the moment there is no "easy" answer. You either refactor the code with the objective to not use a centralized custom server or wait for some unofficial solution regarding this topic.
  • reply
  • like

February 15, 2019 at 6:16am
How exactly would one refactor things intended to be called above the express server, so that they work in a serverless environment.
like-fill
1
  • reply
  • like
How exactly would one refactor things intended to be called above the express server, so that they work in a serverless environment.
Can you elaborate? You can pretty much make a lib.js and call that lib in getInitialProps or something...
  • reply
  • like

February 27, 2019 at 9:33am

May 26, 2019 at 9:01pm
Thank you. You make my day.
  • reply
  • like

May 27, 2019 at 6:00pm
- Glad it helped you.
  • reply
  • like

June 1, 2019 at 5:21am
You don't happen to have this GitHub repo public so I could fork?
  • reply
  • like

June 2, 2019 at 9:56am
I am using your example, but I want to have a custom route, in have an alternative.tsx page that takes a slug param in the query.
my routes are
"routes": [
{
"src": "/api/(.*)",
"dest": "/app/routes/api"
},
{
"src": "/(.*)",
"dest": "/www/$1"
},
{
"src": "/alternative/(?<slug>[^/]+)",
"dest": "/www/pages/alternative?slug=$slug"
}
]
{
"src": "/alternative/(?<slug>[^/]+)",
"dest": "/www/$1/alternative?slug=$slug"
}
does not seem to work I tried "dest": "/www/pages/alternative?slug=$slug" but it does not work either. I always get a 404 when entering http://localhost:3000/alternative/slug-param in the browser with now dev
Edited
  • reply
  • like
ok I found it after a few trials:
"routes": [
{
"src": "/api/(.*)",
"dest": "/app/routes/api"
},
{
"src": "/alternative/(.+)$",
"dest": "/www/alternative?slug=$1"
},
{
"src": "/(.*)",
"dest": "/www/$1"
}
],
seems to do the job!
  • reply
  • like

June 2, 2019 at 5:20pm
Yep, order in routes is a critical thing. Take a good read at https://zeit.co/docs/v2/deployments/routes/#cascading-order
  • reply
  • like

July 10, 2019 at 5:18am
With NextJS 9 for custom API routing, can i use that feature for all backend logics without a separate express server?
  • reply
  • like

July 10, 2019 at 12:51pm
With NextJS 9 for custom API routing, can i use that feature for all backend logics without a separate express server?
Yes!
  • reply
  • like

August 24, 2019 at 8:18pm
After doing so many tutorials for using nextjs with firebase and none of them including the firebase example itself in his github didn't work. I came to the conclusion that firebase was not meant to be used with nextjs.
  • reply
  • like

August 25, 2019 at 2:44am
After doing so many tutorials for using nextjs with firebase and none of them including the firebase example itself in his github didn't work. I came to the conclusion that firebase was not meant to be used with nextjs.
That conclusion is wrong. Yes, we did have limitations with Next.js + Firebase + Now, but they should be working now and the team is also delivering more optimizations.
  • reply
  • like

January 24, 2020 at 6:44pm
Are you aware of any libraries that are now available to help facilitate maintaining state (auth in particular) across serverless pages and api calls? I understand it can be done with cookies but I'm not sure how much we have to reinvent the wheel as of 2020
  • reply
  • like
private
This channel has been archived