In order to run this app, you first need to install redis. If you're on a Mac, you can install and run redis by running brew install redis.
After installing redis, run
yarn redis
To start a default instance of redis.
We use redis to pre-cache some data that normally would take quite a few API requests. To pre-cache all data, run:
yarn setupYou only need to run this script once. To get fresh data, you can run the script again. In production, this script will run on a scheduled basis.
The packages will have been installed after running yarn setup.
To run the dev server, run yarn dev.
This project was bootstrapped with Create Next App.
Find the most recent version of this guide at here. And check out Next.js repo for the most up-to-date info.
- Questions? Feedback?
- Folder Structure
- Available Scripts
- Using CSS
- Adding Components
- Fetching Data
- Custom Server
- Syntax Highlighting
- Using the
staticFolder - Deploy to Now
- Something Missing?
Check out Next.js FAQ & docs or let us know your feedback.
After creating an app, it should look something like:
my-app/
README.md
package.json
next.config.js
components/
head.js
nav.js
pages/
index.js
static/
favicon.ico
Routing in Next.js is based on the file system, so ./pages/index.js maps to the / route and
./pages/about.js would map to /about.
The ./static directory maps to /static in the next server, so you can put all your
other static resources like images or compiled CSS in there.
Out of the box, we get:
- Automatic transpilation and bundling (with webpack and babel)
- Hot code reloading
- Server rendering and indexing of
./pages - Static file serving.
./static/is mapped to/static/
Read more about Next's Routing
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any errors in the console.
Builds the app for production to the .next folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
Starts the application in production mode. The application should be compiled with `next build` first.
See the section in Next docs about deployment for more information.
styled-jsx is bundled with next to provide support for isolated scoped CSS. The aim is to support "shadow CSS" resembling of Web Components, which unfortunately do not support server-rendering and are JS-only.
export default () => (
<div>
Hello world
<p>scoped!</p>
<style jsx>{`
p {
color: blue;
}
div {
background: red;
}
@media (max-width: 600px) {
div {
background: blue;
}
}
`}</style>
</div>
);Read more about Next's CSS features.
We recommend keeping React components in ./components and they should look like:
const Simple = () => <div>Simple Component</div>;
export default Simple; // don't forget to export default!import { Component } from 'react';
class Complex extends Component {
state = {
text: 'World',
};
render() {
const { text } = this.state;
return <div>Hello {text}</div>;
}
}
export default Complex; // don't forget to export default!You can fetch data in pages components using getInitialProps like this:
const Page = (props) => <div>Next stars: {props.stars}</div>;
Page.getInitialProps = async ({ req }) => {
const res = await fetch('https://api.github.com/repos/zeit/next.js');
const json = await res.json();
const stars = json.stargazers_count;
return { stars };
};
export default Page;For the initial page load, getInitialProps will execute on the server only. getInitialProps will only be executed on the client when navigating to a different route via the Link component or using the routing APIs.
Note: getInitialProps can not be used in children components. Only in pages.
Read more about fetching data and the component lifecycle
Want to start a new app with a custom server? Run create-next-app --example customer-server custom-app
Typically you start your next server with next start. It's possible, however, to start a server 100% programmatically in order to customize routes, use route patterns, etc
This example makes /a resolve to ./pages/b, and /b resolve to ./pages/a:
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
createServer((req, res) => {
// Be sure to pass `true` as the second argument to `url.parse`.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true);
const { pathname, query } = parsedUrl;
if (pathname === '/a') {
app.render(req, res, '/b', query);
} else if (pathname === '/b') {
app.render(req, res, '/a', query);
} else {
handle(req, res, parsedUrl);
}
}).listen(3000, (err) => {
if (err) throw err;
console.log('> Ready on http://localhost:3000');
});
});Then, change your start script to NODE_ENV=production node server.js.
Read more about custom server and routing
To configure the syntax highlighting in your favorite text editor, head to the relevant Babel documentation page and follow the instructions. Some of the most popular editors are covered.
now offers a zero-configuration single-command deployment.
-
Install the
nowcommand-line tool either via the recommended desktop tool or via node withnpm install -g now. -
Run
nowfrom your project directory. You will see a now.sh URL in your output like this:> Ready! https://your-project-dirname-tpspyhtdtk.now.sh (copied to clipboard)Paste that URL into your browser when the build is complete, and you will see your deployed app.
You can find more details about now here.
If you have ideas for how we could improve this readme or the project in general, let us know or contribute some!
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent