The Three Ways
What is Next?
The Three Ways
Ett brett penseldrag
about.html
index.html
blog.html
Static Sites
Static hosting
templates
Server Side Rendering
index.html
Active server
bundle.js
index.html
style.css
Client Side Rendering
{
"da": "ta"
}Static hosting
API server
- Build, server and client rendering
- Zero config
- File system routing
- Image optimisation
- API routes
- CSS modules
- Internationalisation
- TypeScript
- Code splitting
yarn create next-apppackage.json
next.config.js
pages/
index.tsx
about.tsx
blog.tsxabout.html
index.html
blog.html
Static Site Generation
const App = () => <h1>Index page</h1>
export default App;
const About = () => <h1>About page</h1>
export default About;index.js
about.js
const Blog = () => <h1>Blog posts</h1>
export default Blog;blog.js
Static Site Generation with Data
export const getStaticProps = () => ({
props: { place: "Soria Moria" }
});
const About = ({place}) => <h1>About {place}</h1>
export default About;
Server Side Rendering
export const getServerSideProps = async () => {
const posts = // get from server
return { props: { posts } }
}
const App = ({posts}) => {
return (
<div>
{posts.map(post => <p>{post.title}</p>)}
</div>
);
};
export default App;
Client Side Rendering
const App = () => {
const {loading, data} = useQuery(...)
return (
<div>
{data && !loading && <Content data={data} />}
{loading && <Spinner />}
</div>
)
};
export default App;
Incremental Static Regeneration
Demo
Next JS på KITS
Expense Manager
KonPro
Deploy
- Static export (S3)
- Server (Node.js)
- Edge (Vercel, Amplify, Netlify)
Frågor?
Next JS
By Gustav Jorlöv
