e8522f4032
* Favicon should have low importance * Update index.js |
||
---|---|---|
.. | ||
components | ||
pages | ||
static | ||
gitignore | ||
README.md |
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.
Table of Contents
- Questions? Feedback?
- Folder Structure
- Available Scripts
- Using CSS
- Adding Components
- Fetching Data
- Syntax Highlighting
- Using the
static
Folder - Deploy to Now
- Something Missing?
Questions? Feedback?
Check out Next.js FAQ & docs or let us know your feedback.
Folder Structure
After creating an app, it should look something like:
.
├── README.md
├── components
│ ├── head.js
│ └── nav.js
├── node_modules
│ ├── [...]
├── package.json
├── pages
│ └── index.js
├── static
│ └── favicon.ico
└── yarn.lock
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 compilation and bundling (with Babel and webpack)
- Hot code reloading
- Server rendering and indexing of
./pages/
- Static file serving.
./static/
is mapped to/static/
Read more about Next's Routing
Available Scripts
In the project directory, you can run:
npm run dev
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.
npm run build
Builds the app for production to the .next
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
npm run start
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.
Using CSS
styled-jsx
is bundled with next to provide support for isolated scoped CSS.
The aim is to support "shadow CSS" resembling of Web Components.
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.
Adding Components
We recommend keeping React components in ./components/
and they should look like:
./components/hello.js
import { useState } from 'react'
export function Hello() {
const [text, setText] = useState('World')
return <div>Hello {text}</div>
}
Fetching Data
You can fetch data in ./pages/
components using getInitialProps
like this:
./pages/stars.js
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
Syntax Highlighting
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.
Deploy to Now
now offers a zero-configuration single-command deployment.
-
Install the
now
command-line tool either via npmnpm install -g now
or Yarnyarn global add now
. -
Run
now
from 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.
Something Missing?
If you have ideas for how we could improve this readme or the project in general, let us know or contribute some!