Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ionutpasca/nextjs
https://github.com/ionutpasca/nextjs
Last synced: 12 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/ionutpasca/nextjs
- Owner: ionutpasca
- Created: 2019-03-07T22:39:38.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-05-07T09:39:58.000Z (over 5 years ago)
- Last Synced: 2024-10-20T01:10:20.724Z (about 1 month ago)
- Language: JavaScript
- Homepage: https://nextjs.pascaionut94.now.sh
- Size: 3.91 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js
In this example we will be deploying a simple "Hello World" example with Next.js.
### Getting started with Next.js
- Create a `pages` folder with an `index.js` file with the following code:
```jsx
import Link from "next/link";
import Header from "../components/header";
export default () => (
Go to About Me
);
```
- Now lets create an `about.js` file inside the `pages` folder with the following code:
```jsx
import { Component } from "react";
import Link from "next/link";
import Header from "../components/header";
class AboutPage extends Component {
static getInitialProps() {
const isServer = typeof window === "undefined";
return { isServer };
}
render() {
return (
This is another page of the SSR example, you accessed it{" "}
{this.props.isServer ? "server" : "client"} side.
You can reload to see how the page change.
Go to Home
);
}
}
export default AboutPage;
```
- As you might noticed we have a component that is shared by both `index.js` and `about.js` files, let's create that one now. Create a folder named `components` with a file named `header.js` in it and add the following code:
```jsx
export default () => (
Next.js Example
);
```
- Finally in order for Next.js to be deployed we could either have a `next.config.js` or a `package.json`, for this example we are just going to create a `next.config.js` with the following code:
```js
module.exports = {
target: 'serverless'
}
```
### Deploy with Now
First we need to create a `now.json` configuration file to instruct Now how to build the project.
For this example we will be using our newest version [Now 2.0](https://zeit.co/now).
By adding the `version` key to the `now.json` file, we can specify which Now Platform version to use.
We also need to define each builders we would like to use. [Builders](https://zeit.co/docs/v2/deployments/builders/overview/) are modules that take a deployment's source and return an output, consisting of [either static files or dynamic Lambdas](https://zeit.co/docs/v2/deployments/builds/#sources-and-outputs).
In this case we are going to use `@now/next` to build and deploy our Next.js application selecting the `next.config.js` as our entry point. We will also define a name for our project (optional).
```json
{
"version": 2,
"name": "nextjs",
"builds": [
{ "src": "next.config.js", "use": "@now/next" }
]
}
```
Visit our [documentation](https://zeit.co/docs/v2/deployments/configuration) for more information on the `now.json` configuration file.
We are now ready to deploy the app.
```
now
```