nextjs-starter
v0.0.1
Published
This is the starter front-end app using NextJS for VideoAmp. It supports TypeScript for JS and Stylus with Styled-JSX for CSS.
Downloads
27
Readme
NextJS Starter
This is the starter front-end app using NextJS for VideoAmp. It supports TypeScript for JS and Stylus with Styled-JSX for CSS.
Check out Next.js repo for the most up-to-date info.
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/
Table of Contents
- Questions?
- Getting Started
- Folder Structure
- Routing
- Available Scripts
- Using CSS
- Adding Components
- Fetching Data
- Syntax Highlighting
Questions?
Check out Next.js FAQ & docs.
Getting Started
Check the available scripts.
Note: The starter app is behind an authentication portal that will need to be loaded. Clone this repo to get going: https://github.com/VideoAmp/launchpad.
You can log in via these credentials:
U: [email protected]
P: supreme100!
You will also need to create a .env
file in your root path of the repo. Add these lines to your .env
file:
DEV_APP_DOMAIN=http://localhost:3001
STAGING_APP_DOMAIN=https://linear-planner.videoamp.com
PROD_APP_DOMAIN=
Folder Structure
The app is scaffolded like this:
my-app/
README.md
package.json
next.config.js
routes.ts
server.ts
...
components/
/Head
index.ts
Head.tsx
/Nav
index.ts
Nav.tsx
pages/
index.js
page1/
index.tsx
index.styles.tsx
static/
favicon.ico
Routing
File System Routing
Note: This is disabled by default for VideoAmp Apps, but can be re-enabled by removing
useFileSystemPublicRoutes: false,
from the next.config.js
file.
File system routing is based on the file system, so ./pages/index.tsx
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.
Read more about Next's Routing
Programmatic Routing
If you want dynamic URLs and named parameters, you can do add them in the routes.ts
file that's located in the root folder
Example route:
/initiatives/123/plans/456/plan
/initiatives/123/plans/456
is also valid do the the ?
at the end of this RegEx :type(plan|daypart)?
.
Both routes will load from the /pages/initiatives/plans/index.tsx
file
routes.ts
const routes = module.exports = require('next-routes')()
routes.add({ name: 'plans', pattern: '/initiatives/:id/plans/:slug/:type(plan|daypart)?', page: 'initiatives/plans' })
Read more about next-routes
Available Scripts
In the project directory, you can run:
yarn dev
Runs the app in the development mode. Open http://localhost:3001 to view it in the browser.
The page will reload if you make edits. You will also see any errors in the console.
yarn 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.
yarn 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
with Stylus support is bundled with next to provide support for isolated scoped CSS.
We enforce that your CSS be written as an external file and imported. Read more here.
index.styles.tsx
import css from 'styled-jsx/css'
export const cardStyles = css`
.card {
width: 640px;
min-height: 450px;
background-color: #000000;
display: block;
margin: 1em auto;
padding: 1em;
header {
background-color: #FF0000;
}
}
`;
Component.tsx
import { cardStyles } from "./index.styles";
...
render(){
return (
<div className="card">
<header>Header</header>
<Button
onClick={() => ())}
primary
raised
>
I'm a button
</Button>
<style jsx>{cardStyles}</style>
</div>
)
}
Read more about Next's CSS features.
Adding Components
We recommend keeping React components in ./components
and they should look like:
./components/Simple/simple.tsx
interface SimpleProps {
text: string,
}
export const Simple = (props: HeadProps) => (
<div>{props.text || ""}</div>
)
./components/Complex/complex.tsx
import { Component } from "react";
interface ComplexProps {
text?: string,
}
export class Complex extends Component<ComplexProps> {
state = {
text: 'World'
}
render () {
const { text } = this.state
return <div>Hello {text}</div>
}
}
Fetching Data
You can fetch data in pages
components using getInitialProps
like this:
./pages/stars.tsx
import axios from "axios";
interface StarProps {
stars: number;
}
const Stars: NextReact.SFC<StarProps> = ({stars} ) => {
return <div>{stars}</div>
}
Stars.getInitialProps = async ({ req }) => {
const { data } = await axios.get('https://api.github.com/repos/zeit/next.js')
return { stars: data.stargazers_count }
}
Stars.defaultProps = {
stars: 0
};
export default Stars
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