This is a sprint planning tool for teams that use fibonacci point system.
After creating an app, it should look something like:
my-app/
README.md
package.json
next.config.js
components/
Head.js
Nav.js
etc
pages/
index.js
about.js,
room.js
actions/
actions.js
api/
api.js
constants/
routes.js
etc
reducers/
bootstrap.js
store/
store.js
static/
favicon.ico
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